第66章 跨域资源共享 (CORS)

Cross-origin Resource Sharing 如果你的单页应用（SPA）在不同子域名上运行，并因此在向你的应用程序进行身份验证时遇到麻烦，那么你很可能配置错了 CORS（跨域资源共享）或会话 Cookie 设置。 有关 CORS 和 CORS 请求头的详细信息，请参阅 MDN 的 CORS 网页文档。 你应该确保应用程序的 CORS 配置返回值为 true 的 Access-Control-Allow-Credentials 请求头，即将 cors 中间件配置中的 AllowCredentials 选项设置为 true。 此外，你还需要启用全局 axios 实例的 withCredentials 选项： js axios.defaults.withCredentials = true; 1
使用 CORS 中间件 在本节中，你将学习如何使用此中间件来允许跨域资源共享。 CORS 中间件的源代码位于 iris-contrib/middleware 仓库中。 1. 安装中间件： sh $ go get github.com/iris-contrib/middleware/jwt@master 1
2. 在代码中导入： go import "github.com/iris-contrib/middleware/cors" 1
3. 初始化并配置中间件： go cors := cors.New(cors.Options{ AllowedOrigins: []string{"*"}, AllowCredentials: true, }) 1
2
3
4
4. 注册中间件： go app.UseRouter(crs) 1
就是这样。你的 Iris Web 服务器现在可以接受来自客户端的跨域 API 请求了。 原生 JavaScript 客户端示例： js // 将 "host" 替换为你的 Iris Web 服务器域名。 const host = 'https://e1de7bc1.ngrok.io'; async function postData(url = '', data = {}) { const response = await fetch(url, { method: 'POST', mode: 'cors', cache: 'no-cache', credentials: 'same-origin', headers: { 'Content-Type': 'application/json' }, redirect: 'follow', referrerPolicy: 'no-referrer', body: JSON.stringify(data) }); return response.json(); } postData(host + '/api/mailer', { email: "me@test.com" }) .then(data => { console.log(data); document.write(data.message); }); 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
完整示例代码请访问：iris-contrib/middleware/cors/_example。 CORS 配置 cors.Options 结构体的完整配置如下： ```go // AllowedOrigins 是允许发起跨域请求的来源列表。 // 如果列表中包含特殊值 "*"，则允许所有来源。 // 来源中可以使用通配符 (*) 来代替 0 个或多个字符（例如：http://*.domain.com）。 // 使用通配符会带来轻微的性能开销。 // 每个来源只能使用一个通配符。 // 默认值为 ["*"]。 AllowedOrigins []string // AllowOriginFunc 是一个用于验证来源的自定义函数。 // 它接收 origin 作为参数，如果允许则返回 true，否则返回 false。 // 如果设置了此选项，则 AllowedOrigins 的内容将被忽略。 AllowOriginFunc func(origin string) bool // AllowedMethods 是客户端在跨域请求中允许使用的方法列表。 // 默认为简单方法（HEAD、GET 和 POST）。 AllowedMethods []string // AllowedHeaders 是客户端在跨域请求中允许使用的非简单头字段列表。 // 如果列表中包含特殊值 "*"，则允许所有头字段。 // 默认值为 []，但 "Origin" 始终会被添加到列表中。 AllowedHeaders []string // ExposedHeaders 指定哪些头字段可以安全地暴露给 CORS API 规范的 API。 ExposedHeaders []string // MaxAge 指示预检请求的结果可以缓存的时长（秒）。 MaxAge int // AllowCredentials 指示请求是否可以包含用户凭证， // 例如 cookies、HTTP 认证或客户端 SSL 证书。 AllowCredentials bool // OptionsPassthrough 指示预检让其他潜在的后续处理器处理 OPTIONS 方法。 // 如果你的应用处理 OPTIONS，请开启此选项。 OptionsPassthrough bool // Debug 标志会为服务器端的 CORS 问题增加额外的调试输出。 Debug bool ```

自己动手实现

你也可以直接使用 Iris 的请求 Context 手动发送必要的响应头来处理 preflight 请求，从而允许跨域请求。下面是一个简单的示例：

package main

import "github.com/kataras/iris/v12"

func main() {
	app := iris.New()

    // 自定义 CORS 中间件。
	crs := func(ctx iris.Context) {
		ctx.Header("Access-Control-Allow-Origin", "*")
		ctx.Header("Access-Control-Allow-Credentials", "true")

		if ctx.Method() == iris.MethodOptions {
            ctx.Header("Access-Control-Methods",
                "POST, PUT, PATCH, DELETE")

            ctx.Header("Access-Control-Allow-Headers",
                "Access-Control-Allow-Origin,Content-Type")

            ctx.Header("Access-Control-Max-Age",
                "86400")

			ctx.StatusCode(iris.StatusNoContent)
			return
		}

		ctx.Next()
	}

    app.UseRouter(crs)
    
    // [注册路由...]
}