<h1 id="heading">什么是跨域</h1>
为了确保安全，通常需要限定请求资源的权限。浏览器认为而不同是不同服务，当前的域名的会话不应该随意去访问其他域名的服务（因为可能会有恶意脚本故意访问钓鱼站点，从而导致 Cookie 泄露）
同一个域名要求 协议、域名、端口 完全相同，否则称为跨域 
跨域请求需要进行相应的设置才会被浏览器允许，否则即使消息请求被正确发送，浏览器也不会进行后续操作。
跨域是 浏览器的安全策略，如果不是从浏览器发送请求（如代码直接请求），是不需要考虑这个问题的
<h2 id="heading-1">跨域分类</h2>
跨域分为以下几种情况:
<ul>
<li>简单跨域: 使用<code>GET</code>、<code>POST</code>、<code>HTTP</code>请求，且格式为<code>text/plain</code>、<code>multipart/form-data</code>、<code>application/x-www-form-urlencoded</code>。这些只需要在服务端允许接收其他域名的请求即可，如<code>Access-Control-Allow-Origin: http://foo.example</code></li>
<li>预检请求: 除简单跨域外，其他的请求都需要提前发送一个<code>OPTIONS</code>请求，服务器需要返回是否允许该请求，而后才会发送正常的请求数据。因此除去上面的<code>Access-Control-Allow-Origin: http://foo.example</code>外，还需要配置<code>Access-Control-Allow-Headers: Content-Type</code>和<code>&quot;Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE</code>。并且直接返回<code>OPTIONS</code>请求（有其他数据也不会被浏览器处理）</li>
<li>带身份凭据的请求: 如果需要携带 Cookie，则首先需要在前端的请求进行相应的配置<code>withCredentials=true</code>，而后响应中需要携带<code>Access-Control-Allow-Credentials: true</code>，同时<code>Access-Control-Allow-Origin</code>不能使用<code>*</code>，必须具体到域名。其他则按照前面的要求进行配置</li>
</ul>
<h2 id="heading-2">示例代码</h2>
下面是博客中使用的预检处理代码和 Python 中所有情况的代码
<pre style="background-color:#fff">// CORS
context.AddHeader(&#34;Access-Control-Allow-Origin&#34;, &#34;*&#34;)
context.AddHeader(&#34;Access-Control-Allow-Headers&#34;, &#34;*&#34;)
context.AddHeader(&#34;Access-Control-Allow-Methods&#34;, &#34;POST, GET, OPTIONS, DELETE&#34;)
if context.Request.Method == &#34;OPTIONS&#34; {
 context.Success()
 return
}
</pre><pre style="background-color:#fff">cors_origin = request.headers.get(
 &#34;Origin&#34;, &#34;*&#34;
)

if request.method == &#34;OPTIONS&#34;:
 return Response(
 &#34;OPTIONS&#34;,
 mimetype=&#34;text/plain&#34;,
 content_type=&#34;text/plain&#34;,
 headers={
 &#34;Access-Control-Allow-Origin&#34;: cors_origin,
 &#34;Access-Control-Allow-Methods&#34;: &#34;POST, GET, OPTIONS&#34;,
 &#34;Access-Control-Allow-Headers&#34;: &#34;access-control-allow-origin&#34;,
 &#34;Access-Control-Allow-Credentials&#34;: &#34;true&#34;,
 &#34;Access-Control-Max-Age&#34;: &#34;86400&#34;
 }
 )
else:
 # 正常处理逻辑

 response.headers[&#34;Access-Control-Allow-Origin&#34;] = cors_origin
 response.headers[&#34;Access-Control-Allow-Credentials&#34;] = &#34;true&#34;
 return response
</pre><h2 id="heading-3">前后端联调跨域</h2>
跨域往往在前后端分离系统中联调中存在，如果可以的话，可以使用 Nginx 反向代理来将前后端统一到一个域名下
当然在前端的服务端也可以做一个请求转发，因为跨域限制只在浏览器中存在
<h2 id="heading-4">参考资料</h2>
<ul>
<li><a href="https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS">跨源资源共享（CORS）</a></li>
</ul>