1. 概述

开发Web服务，跨域问题是很难避免的。本文主要来介绍一下跨域问题，以及对应的多种解决方法。

2. 跨域问题分析

首先了解一下相关概念。

2.1. 浏览器的同源策略

它是浏览器的一个重要的安全策略，用于限制一个源的文档或者它加载的脚本如何能与另一个源的资源进行交互。

它能帮助阻隔恶意文档，减少可能被攻击的媒介。例如，它可以防止互联网上的恶意网站在浏览器中运行 JS 脚本，从第三方网络邮件服务（用户已登录）或公司内网（因没有公共 IP 地址而受到保护，不会被攻击者直接访问）读取数据，并将这些数据转发给攻击者。

• 源的定义

如果两个URL的协议、端口（如果有指定的话）和主机都相同的话，则这两个URL是同源的。这个方案也被称为“协议/主机/端口元组”，或者直接是“元组”。

下表给出了与URL=http://store.company.com/dir/page.html的源进行对比的示例：

URL	结果	原因
http://store.company.com/dir2/other.html	同源	只有路径不同
http://store.company.com/dir/inner/another.html	同源	只有路径不同
https://store.company.com/secure.html	失败	协议不同
http://store.company.com:81/dir/etc.html	失败	端口不同（http:// 默认端口是 80）
http://news.company.com/dir/other.html	失败	主机不同

• 跨源网络访问

同源策略控制不同源之间的交互，例如在使用 XMLHttpRequest 或 <img> 标签时则会受到同源策略的约束。

可以使用 CORS（Cross-Origin Resource Sharing，跨源资源共享） 来允许跨源访问。CORS 是 HTTP 的一部分，它允许服务端来指定哪些主机可以从这个服务端加载资源。

• 跨源脚本 API 访问

JavaScript 的 API 中，如 iframe.contentWindow、 window.parent、window.open 和 window.opener 允许文档间直接相互引用。当两个文档的源不同时，这些引用方式将对 Window 和 Location 对象的访问添加限制（有一些API还是可以跨域使用的）。

• 跨源数据存储访问

访问存储在浏览器中的数据，如 Web Storage 和 IndexedDB，是以源进行分割的。每个源都拥有自己单独的存储空间，一个源中的 JavaScript 脚本不能对属于其他源的数据进行读写操作。

2.2. 跨源资源共享（CORS）

跨源资源共享（CORS，Cross-Origin Resource Sharing，或通俗地译为跨域资源共享）是一种基于 HTTP 头的机制，该机制通过允许服务器标示除了它自己以外的其他源（域、协议或端口），使得浏览器允许这些源访问加载自己的资源。

跨源资源共享还通过一种机制来检查服务器是否会允许要发送的真实请求，该机制通过浏览器发起一个到服务器托管的跨源资源的“预检”请求。在预检中，浏览器发送的头中标示有 HTTP 方法和真实请求中会用到的头。

CORS是浏览器提供的能力，而实现CORS的控制和通信是在服务端进行。也就是只要服务端对相应域允许CORS，那么便可进行跨域通信。

浏览器根据请求方法以及HTTP头部信息将CORS请求分成两类，简单请求和预检请求。

简单请求

若满足下列条件，则视为简单请求：

• 请求方法属于GET、POST、HEAD中的一种
• HTTP头部仅包含Accept、Accept-Language、Content-Language、Content-Type。

其中Content-Type的值仅限于text/plain、multipart/form-data、application/x-www-form-urlencoded。

简单请求

预检请求

与简单请求不同，“需预检的请求”要求必须首先使用 OPTIONS 方法发起一个预检请求到服务器，以获知服务器是否允许该实际请求。"预检请求“的使用，可以避免跨域请求对服务器的用户数据产生未预期的影响。

预检请求 Firefox的预检请求 options+put

• 参考

3. 通过Nginx实现CORS

3.1. 只允许单个域跨域访问

允许网站http://foo.bar.cn访问http://xxx.yyy.cn的API，并且自动代理到http://aaa.bbb.cn:9090的内部服务。

server {
    listen 80;
    server_name  xxx.yyy.cn;

    location / {
        proxy_pass         http://aaa.bbb.cn:9090;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        if ($request_method = 'OPTIONS') {
            add_header Access-Control-Allow-Origin 'http://foo.bar.cn';
            add_header Access-Control-Allow-Credentials 'true';
            add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';
            add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';
            return 204;
        }
    }
}

3.2. 允许多个域跨域访问

允许网站http://foo1.bar.cn和http://foo2.bar.cn，访问http://xxx.yyy.cn的API，并且自动代理到http://aaa.bbb.cn:9090的内部服务。

注意：为什么Access-Control-Allow-Origin不写*？因为浏览器不支持，必须是单个确定的三元组（协议、主机和端口）。

server {
    listen 80;
    server_name  xxx.yyy.cn;

    location / {
        add_header Access-Control-Allow-Credentials 'true';
        add_header Access-Control-Allow-Methods 'GET, POST, PUT, DELETE, OPTIONS';
        add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

        set $cors_origin "";
        if ($http_origin ~* "^http://foo1.bar.cn$") {
            set $cors_origin $http_origin;
        }
        if ($http_origin ~* "^http://foo2.bar.cn$") {
            set $cors_origin $http_origin;
        }
        add_header Access-Control-Allow-Origin $cors_origin;
        if ($request_method = 'OPTIONS') {
            return 204;
        }

        proxy_pass http://aaa.bbb.cn:9090;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    }
}

4. 在Gin中实现CORS

4.1. 手动设置header

• 支持单个origin的跨域访问
• 如果要支持多个，也可以修改代码实现

func corsHandler() gin.HandlerFunc {
    return func(c *gin.Context) {
        c.Writer.Header().Set("Access-Control-Allow-Origin", "http://foo.bar.cn")
        c.Writer.Header().Set("Access-Control-Allow-Headers", "*")  // *可能有问题，需要测试
        c.Writer.Header().Set("Access-Control-Allow-Methods", "*")  // *可能有问题，需要测试
        c.Writer.Header().Set("Access-Control-Allow-Credentials", "true")
        if c.Request.Method == "OPTIONS" {
            c.AbortWithStatus(204)
            return
        }
        c.Next()
    }
}

func main() {
    var routes = gin.New()
    routes.Use(corsHandler())
    ...
}

4.2. 第三方package

• 支持多个origin的跨域访问
• github.com/gin-contrib/cors

func setCors(routes *gin.Engine) {
    routes.Use(cors.New(cors.Config{
        AllowOrigins: []string{
            "http://foo1.bar.cn",
            "http://foo2.bar.cn",
        },
        AllowMethods:     []string{"GET", "HEAD", "POST", "PUT", "DELETE", "PATCH"},
        AllowHeaders:     []string{"Content-Type"},
        ExposeHeaders:    []string{"*"},
        AllowCredentials: true,
        MaxAge:           12 * time.Hour,
    }))
}

func main() {
    var routes = gin.New()
    setCors(routes)
    ...
}

5. 其他解决方法

• 开发或调试前端代码时，可以通过webpack或vite提供的proxy功能，避免跨域问题。
• 生产环境，可以通过Nginx代理前端静态文件和后端API服务，用户只访问Nginx服务，也就不存在跨域问题。