Go | Gin 解决跨域问题跨域配置

2020-12-14 11:02:02 浏览数 (1)

介绍

CORS 全称 Cross-Origin Resource Sharing，中文翻译为 跨域资源共享。CORS 可以看做web服务器和浏览器之间的协议， web服务器声明限制内容，浏览器解析并实施限制。

web服务器 -> 我允许来自 http://www.a.com/ 的 ajax 请求浏览器 -> 晓得了

web服务器声明限制使用的方式是，在 response 中添加对应的 header。比如：

Access-Control-Allow-Origin: http://www.a.com/

上面的 header 表示允许来自 http://www.a.com/ 的访问。origin 指 http 请求发成的站点的 domain。比如，ajax 是从 http://www.a.com/home.html 发出，那么 origin 就是 http://www.a.com/ 。

具体的交互过程（简单请求）：

代码语言：javascript复制
client            browser                        web server
   |    -> ajax      |           ->http request      |
   |               check headers <-http response     |

浏览器检查 header 发现允许访问，则将数据交付给 ajax，否则丢掉结果。

可以为不同的 API 设置不同的 response header，所以， CORS 的控制粒度可以精准到 API 级别。

一、关于跨域解决方案

关于跨域的解决方法，大部分可以分为 2 种

  1. nginx反向代理解决跨域
  2. 服务端设置Response Header(响应头部)的Access-Control-Allow-Origin

nginx代理跨域

1、nginx配置解决iconfont跨域

众所周知js、css、img等常用资源不受浏览器同源策略限制，但一些特殊资源如iconfont字体文件(eot|otf|ttf|woff|svg)除外，这里通过修改nginx配置就可以解决。

代码语言：javascript复制
location / {
  add_header Access-Control-Allow-Origin *;
}
2、nginx 反向代理

同源策略是浏览器的安全策略，不属于http协议一部分，限制的是js脚本。而服务器端调用的http接口，不受同源策略限制，也不存在跨域问题。

实现思路：nginx服务器作为中间代理（或跳转机），实现从域名A访问域名B，像访问同域一样。

示例

代码语言：javascript复制
server {
           listen 80;
           server_name http://domain1; 

           location / {
               proxy_pass http://domain2:8081/;
               proxy_set_header Host $host;
               proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
               proxy_set_header X-Forwarded-Proto $scheme;
               proxy_set_header X-Forwarded-Port $server_port;
            }
}

对于后端开发来说，第 2 种的操作性更新灵活，这里也讲一下 Gin 是如何做到的

二、使用步骤

在 Gin 中提供了 middleware (中间件) 来做到在一个请求前后处理响应的逻辑，这里我们使用中间来做到在每次请求是添加上 Access-Control-Allow-Origin 头部

1. 编写一个中间件

可以 middlewares 包下创建

代码语言：javascript复制
package middlewares

import (
    "github.com/gin-gonic/gin"
    "net/http"
)

func Cors() gin.HandlerFunc {
    return func(c *gin.Context) {
        method := c.Request.Method
        if origin != "" {
        // 可将将* 替换为指定的域名
            c.Header("Access-Control-Allow-Origin", "*") 
            c.Header("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE, UPDATE")
            c.Header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization")
            c.Header("Access-Control-Expose-Headers", "Content-Length, Access-Control-Allow-Origin, Access-Control-Allow-Headers, Cache-Control, Content-Language, Content-Type")
            c.Header("Access-Control-Allow-Credentials", "true")
        }

        if method == "OPTIONS" {
            c.AbortWithStatus(http.StatusNoContent)
        }

        c.Next()
    }
}

2. 使用

代码语言：javascript复制
r := gin.Default()

r.Use(middlewares.Cors())

3. 注意事项

需要将 r.Use(middlewares.Cors()) 在使用路由前进行设置，否则会导致不生效

反例

代码语言：javascript复制
r := gin.Default()

pingGroup := r.Group("ping")
{
    pingGroup.GET("/", Ping)
}

r.Use(middlewares.Cors())

这样会导致跨域配置不生效

参考：阮一峰博文->跨域资源共享 CORS 详解：

http://www.ruanyifeng.com/blog/2016/04/cors.html

http 网站 access ajax nginx

0 人点赞