利用Nginx代理解决跨域问题

2018-12-24 / Linux / Hoe

前奏

使用js获取数据时，只要协议、域名、端口有任何一个不同，都被当作是不同的域，之间的请求就是跨域操作。

这是被浏览器禁止的操作,会有以下错误

XMLHttpRequest cannot load http://www.x.cn/api.php. 
No 'Access-Control-Allow-Origin' header is present on the requested resource.Origin 'http://www.xx.com.cn' is therefore not allowed access.

解决跨域的方案有很多, 可参考在这我推荐使用Nginx代理来解决

解决跨域的思路:

前端项目请求的还是当前项目的域名, 然后用Nginx把接口转发到服务端项目的域名上, 这样不就避免跨域的产生了?

举个例子:

前端项目的域名是 www.1.com, 服务端接口域名是www.2.com

在www.1.com直接调用www.2.com接口肯定会跨域报错. 这时Nginx上场

开启大招

# 配置前端项目的server
server {
    # 前端项目监听80端口
    listen 80;
    # 前端项目域名是www.1.com
    server_name www.1.com;
    # 凡是访问www.1.com/api开头的接口, 都会被转发到服务端地址http://www.2.com 
    location ^~ /api {
        proxy_pass http://www.2.com;
    }    
}

总结

在前端项目访问www.1.com/api/getUser 实际上获取到的是http://www.2.com/getUser/这个接口返回的数据

这样就可以利用nginx代理来解决跨域问题了!

已有 6 条评论

简单生活 2019-01-12 10:16 回复

关注了，以后有机会链一下！
运情 2019-01-03 10:43 回复

e 😧
Quanyin 2018-12-24 16:37 回复

你这直接上反代搞复杂了呀，加个 Access-Control-Allow-Origin 响应头就完了
1. Hoe 2018-12-24 16:55 回复
  
  有很多方法可以解决, 主要还是得看项目背景和开发情况. CORS确实是主流的跨域解决方案.但是如果服务端之前没有设置Access-Control-Allow-Origin, 用Nginx方式就可以不需要更新之前的服务端代码了.😃
熊猫小A 2018-12-24 15:51 回复

还能这么搞的😂
一般不都是在 nginx 里面加响应头的吗
1. Hoe 2018-12-24 16:35 回复
  
  用Nginx方式比较方便, 但还是得看场景而定. 好像CROS才是更通用的做法吧

前奏

解决跨域的思路:

举个例子:

总结

我来吐槽

已有 6 条评论