一、跨源请求：那些发送到其他域（即使是子域）、协议或端口的请求。

⭐️前后端跨域通信方式

跨域：前后端通信 - 图1

支持跨域的html标签

标签	优点	缺点
</td> <td>跨域完毕之后DOM操作和互相之间的JavaScript调用都是没有问题的</td> <td>1.若结果要以URL参数传递，这就意味着在结果数据量很大的时候需要分割传递，<br />2.还有一个是iframe本身带来的，母页面和iframe本身的交互本身就有安全性限制。</td> </tr> <tr> <td><script></td> <td>可以直接返回json格式的数据，方便处理</td> <td>只接受GET请求方式</td> </tr> <tr> <td><img></td> <td>可以访问任何url，一般用来进行点击追踪，做页面分析常用的方法</td> <td>不能访问响应文本，只能监听是否响应</td> </tr> </tbody> </table> <p><a name="rOBxd"></a></p> <h1 id="6socam"><a name="6socam" class="reference-link"></a><span class="header-link octicon octicon-link"></span>向其他网站发出请求</h1><p><a name="Ac58r"></a></p> <h2 id="9zdjy3"><a name="9zdjy3" class="reference-link"></a><span class="header-link octicon octicon-link"></span>使用表单</h2><p>一、原生 form 表单请求，和 action，method，enctype 属性有关<br />1、form 表单提交后，会自动跳转页面到 action 所指向的 URL 来获取结果，最后变成同域，<br />2、在没有 AJAX 技术的时候，我们发 POST 一般会提交到当前 URL，后端响应 POST 请求，处理之后，又将当前页面返回浏览器重新渲染，这也是每次提交表单会刷新页面的原因。<br />二、Form表单提交数据，请求到了另一个域里，原页面的脚本无法获取新页面里的内容，Form表单会刷新页面也不会把返回结果给js，所以浏览器认为安全 <a name="ASkGZ"></a></p> <h3 id="85rocn"><a name="85rocn" class="reference-link"></a><span class="header-link octicon octicon-link"></span>form + iframe</h3><p>一、其中一种和其他服务器通信的方法是在那里提交一个 <form>。人们将它提交到 <iframe>，只是为了停留在当前页面，像这样：</p> <p>\| 【示例】```javascript <!-- 表单目标 --></p> <!-- 表单可以由 JavaScript 动态生成并提交 --> <p><form target="iframe" method="POST" action="http://another.com/…"> … </form></p> <pre><code> \| \| --- \| 二、优点<br />1、即使没有网络方法，也可以向其他网站发出 GET/POST 请求，因为表单可以将数据发送到任何地方。<br />三、缺点<br />1、由于禁止从其他网站访问 <iframe> 中的内容，因此就无法读取响应。 <a name="qaL7q"></a> ## jsonp（JSON with padding） / 使用 script 一、jsonp主要是利用了 script 标签没有跨域限制这个特性来完成的。 <a name="W6H32"></a> ### 使用限制一、仅支持GET方法 <a name="APxGo"></a> ### 流程解析 / 工作方式一、流程解析<br />1、前端定义解析函数，如`jsonpCallback=function() { }`<br />2、通过params形式包装请求参数，并且声明执行函数，如`cb = jsonpkCallback`<br />3、后端获取前端声明的执行函数`jsonpCallback`，并以带上参数并调用执行函数的方式传递给前端。 \| 【示例】假设在我们的网站，需要以这种方式从 http://another.com 网站获取数据，例如天气：<br />1、首先，我们先声明一个全局函数来接收数据，例如 gotWeather。```javascript // 1. 声明处理天气数据的函数 function gotWeather({ temperature, humidity }) { alert(`temperature: ${temperature}, humidity: ${humidity}`); } </code></pre><p>2、然后我们创建一个特性（attribute）为 src=”<a rel="nofollow" href="http://another.com/weather.json?callback=gotWeather">http://another.com/weather.json?callback=gotWeather</a>“ 的 <script> 标签，使用我们的函数名作为它的 callback URL-参数。<code>``javascript let script = document.createElement('script'); script.src =</code><a rel="nofollow" href="http://another.com/weather.json?callback=gotWeather`">http://another.com/weather.json?callback=gotWeather`</a>; document.body.append(script);</p> <pre><code>3、远程服务器 another.com 动态生成一个脚本，该脚本调用 gotWeather(...)，发送它想让我们接收的数据。```javascript // 我们期望来自服务器的回答看起来像这样： gotWeather({ temperature: 25, humidity: 78 }); </code></pre><p>4、当远程脚本加载并执行时，gotWeather 函数将运行，并且因为它是我们的函数，我们就有了需要的数据。 \| \| —- \|</p> <p>五、JSONP是可行的，并且不违反安全规定，因为双方都同意以这种方式传递数据。而且，既然双方都同意这种行为，那这肯定不是黑客攻击了。<br />1、现在仍然有提供这种访问的服务，因为即使是非常旧的浏览器它依然适用。</p> <p><a name="xv55R"></a></p> <h1 id="303l3z"><a name="303l3z" class="reference-link"></a><span class="header-link octicon octicon-link"></span>修改浏览器安全设置（需谨慎，不推荐）</h1><p><a name="kq0ZG"></a></p> <h2 id="74itrb"><a name="74itrb" class="reference-link"></a><span class="header-link octicon octicon-link"></span>chrome</h2><p><a name="bqUaR"></a></p> <h3 id="9wacsr"><a name="9wacsr" class="reference-link"></a><span class="header-link octicon octicon-link"></span>windows</h3><pre><code class="lang-javascript">找到你安装的目录 .\Google\Chrome\Application\chrome.exe --disable-web-security --user-data-dir=xxxx </code></pre> <p><a name="Y61F7"></a></p> <h3 id="eivgh8"><a name="eivgh8" class="reference-link"></a><span class="header-link octicon octicon-link"></span>mac</h3><p>一、~/Downloads/chrome-data 这个目录可以自定义.</p> <pre><code class="lang-javascript">/Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --disable-web-security --user-data-dir=~/Downloads/chrome-data </code></pre>