什么是跨域

为了确保安全，通常需要限定请求资源的权限。浏览器认为而不同是不同服务，当前的域名的会话不应该随意去访问其他域名的服务（因为可能会有恶意脚本故意访问钓鱼站点，从而导致 Cookie 泄露）

同一个域名要求 协议、域名、端口 完全相同，否则称为跨域
跨域请求需要进行相应的设置才会被浏览器允许，否则即使消息请求被正确发送，浏览器也不会进行后续操作。

跨域是 浏览器的安全策略，如果不是从浏览器发送请求（如代码直接请求），是不需要考虑这个问题的

跨域分类

跨域分为以下几种情况:

• 简单跨域: 使用GET、POST、HTTP请求，且格式为text/plain、multipart/form-data、application/x-www-form-urlencoded。这些只需要在服务端允许接收其他域名的请求即可，如Access-Control-Allow-Origin: http://foo.example
• 预检请求: 除简单跨域外，其他的请求都需要提前发送一个OPTIONS请求，服务器需要返回是否允许该请求，而后才会发送正常的请求数据。因此除去上面的Access-Control-Allow-Origin: http://foo.example外，还需要配置Access-Control-Allow-Headers: Content-Type和"Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE。并且直接返回OPTIONS请求（有其他数据也不会被浏览器处理）
• 带身份凭据的请求: 如果需要携带 Cookie，则首先需要在前端的请求进行相应的配置withCredentials=true，而后响应中需要携带Access-Control-Allow-Credentials: true，同时Access-Control-Allow-Origin不能使用*，必须具体到域名。其他则按照前面的要求进行配置

示例代码

下面是博客中使用的预检处理代码和 Python 中所有情况的代码

// CORS
context.AddHeader("Access-Control-Allow-Origin", "*")
context.AddHeader("Access-Control-Allow-Headers", "*")
context.AddHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE")
if context.Request.Method == "OPTIONS" {
        context.Success()
        return
}

cors_origin = request.headers.get(
    "Origin", "*"
)

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

    response.headers["Access-Control-Allow-Origin"] = cors_origin
    response.headers["Access-Control-Allow-Credentials"] = "true"
    return response

前后端联调跨域

跨域往往在前后端分离系统中联调中存在，如果可以的话，可以使用 Nginx 反向代理来将前后端统一到一个域名下

当然在前端的服务端也可以做一个请求转发，因为跨域限制只在浏览器中存在

参考资料

• 跨源资源共享（CORS）