nginx解决跨域

声明

摘自:https://juejin.cn/post/6844903942262882318#comment

跨域问题

跨域的定义

同源策略限制了从同一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。通常不允许不同源间的读操作。

同源的定义

如果两个页面的协议，端口（如果有指定）和域名都相同，则两个页面具有相同的源。

nginx解决跨域的原理

例如：

• 前端server域名为：http://xx_domain
• 后端server域名为：https://github.com

现在http://xx_domain对https://github.com发起请求一定会出现跨域。

不过只需要启动一个nginx服务器，将server_name设置为xx_domain,然后设置相应的location以拦截前端需要跨域的请求，最后将请求代理回github.com。如下面的配置：

## 配置反向代理的参数
server {
    listen    8080;
    server_name xx_domain

    ## 1. 用户访问 http://xx_domain，则反向代理到 https://github.com
    location / {
        proxy_pass  https://github.com;
        proxy_redirect     off;
        proxy_set_header   Host             $host;        # 传递域名
        proxy_set_header   X-Real-IP        $remote_addr; # 传递ip
        proxy_set_header   X-Scheme         $scheme;      # 传递协议
        proxy_set_header   X-Forwarded-For  $proxy_add_x_forwarded_for;
    }
}
复制代码

这样可以完美绕过浏览器的同源策略：github.com访问nginx的github.com属于同源访问，而nginx对服务端转发的请求不会触发浏览器的同源策略。

作者：锐玩道
链接：https://juejin.cn/post/6844903942262882318
来源：掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。