nginx反向代理解决跨域问题

跨域：浏览器从一个域名的网页去请求另一个域名的资源时，域名、端口、协议任一不同，都是跨域 。

下表格为前后端分离的域名，技术信息：

	域名	服务器	使用技术
前端	http://b.yynf.com	nginx	vue框架
后端api	http://api.yynf.com	nginx	php

 

 

 

 

 

两种方式解决跨域的问题：

解决方法一：

在php入口index.php文件加入header头代码，允许访问解决了js调用api跨域的问题。

    header("Access-Control-Allow-Origin: *");
    header("Access-Control-Allow-Headers: Accept,Authorization,Cache-Control,Content-Type,DNT,If-Modified-Since,Keep-Alive,Origin,User-Agent,X-Mx-ReqToken,X-Requested-With,api-key");
    header("Access-Control-Allow-Method: GET, POST, OPTIONS, HEAD");
    header("Access-Control-Allow-Credentials: true");

 

解决方法二：

使用nginx的反向代理解决跨域：

api的nginx配置不需要改变只需要改变前端的服务器的nginx配置即可：

    location /apis {
            rewrite  ^.+apis/?(.*)$ /$1 break;
            include  uwsgi_params;
            proxy_pass  http://api.yynf.com;
    }

proxy_pass  url地址

让nginx监控/apis目录（这里自己定义只要跟nginx配置中保持一致即可），如果发现了这个目录就将所有请求代理到http://api.yynf.com这个请求中，当然也需要在js调用api的请求中多加一层请求结构：

 

	前端代码中js请求地址
旧的js请求api的地址	http://api.yynf.com/badmin/user/add
新的js请求api的地址	http://api.yynf.com/apis/badmin/user/add

 

 

 

 

这样一来访问页面就会发现前端代码调用api地址都转向了http://api.yynf.com/apis/，利用将请求通过服务器内部代理实现了跨域问题。

 

代理解决跨域的优点：

1.有效的隐藏实际api的请求地址和服务器的ip地址
2.各司其职让前后端更方便管理，个自搭建自己的服务器保持一定的规范即可。