前奏

使用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代理来解决跨域问题了!

版权属于：大卫科技Blog

本文链接：https://www.iyuu.cn/archives/412/

转载时须注明出处