前端跨域，nginx反向代理的解决方案
现在越来越多的公司开始使用前后端分离的技术，而盲目的分离是不理智的，跨域也是第一难题。我的第一份工作就是公司第一个以前端开发者的身份入职，此时公司所有的项目都已正式运行了（项目太多，结构复杂，团队分散，后台不能改）
先了解一下为什么跨域：
1.浏览器先根据同源策略对前端页面和后台交互地址做匹配，若同源，则直接发送数据请求；若不同源，则发送跨域请求。
2.服务器解析程序收到浏览器跨域请求后，根据自身配置返回对应文件头。若未配置过任何允许跨域，则文件头里不包含Access-Control-Allow-origin字段，若配置过域名，则返回Access-Control-Allow-origin+ 对应配置规则里的域名的方式。
3.浏览器根据接受到的http文件头里的Access-Control-Allow-origin字段做匹配，若无该字段，说明不允许跨域；若有该字段，则对字段内容和当前域名做比对，如果同源，则说明可以跨域，浏览器发送该请求；若不同源，则说明该域名不可跨域，不发送请求
总结一下跨域的原因就是一句话：不同IP或不同端口就是跨域。想了解更详细的可以去查查别人的资料。
所以想要解决跨域的方法就是让服务器追加该前端的域名。
后台不加怎么办？以下就是解决方案之一：
让前端页面和后台交互地址同源。
Nginx代理方式
这里所说的代理是指前端的代理，跟后端没什么关系
修改nginx.conf配置文件
server {
listen 80;
server_name http://localhost;
location / {
root D:\test;
index index.html index.htm;
}
}这里是代理了一个本地项目，开通80端口访问，root是本地项目路径，index是项目的入口文件。
我只贴了主要的地方，404、500之类的东西可以参考别人或看官方文档。
如果你的前端采用的node.js之类的服务器运行的话
location / {
proxy_pass http://localhost:8080;
}这也已经是反向代理了，使用80端口就可以访问8080端口的前端页面了。
Nginx反向代理
进入正题，在同一配置文件下加点东西
location /test{
rewrite ^.+test/?(.*)$ /$1 break;
proxy_pass http://localhost:8090;
}这是反向代理了8090端口的服务器，/test作为标识指向该服务器，rewrite重定向URL，将/test删除掉。
讲解下使用方法
让前端页面和后台交互地址同源的意思就是：
1.打开前端页面的地址是：http://localhost:80
2.请求的后台地址也是：http://localhost:80
在上面的配置中 /test 作为标识，http://localhost:80/test 指向的就是 http://localhost:8090 这台服务器，rewrite 把 test/ 给删除了，所以不会影响路径而导致地址错误。
所以在前端向后台发送接口请求的时候一定要注意了：
$.ajax({
url:'http://localhost:80/test/url', // /test代表8090服务器
type:'post',
async:true,
data:{},
timeout:5000,
dataType:'json',
success:function(data,textStatus,jqXHR){
console.log(JSON.stringify(data))
},
error:function(xhr,textStatus){
console.log('错误')
}
})http://localhost:80/test 代表的服务器的IP，/url 就是接口的详细路径。
重要：
访问前端的页面时采用的是域名访问，这里的后台接口必需也是域名：http://:80/test/url；
如果是IP访问，相应的也要改成 http://192.168.199.1:80/test/url，请留意!
随手写的一份Nginx配置文件
server {
listen 80;
server_name http://localhost;
#charset koi8-r;
#access_log logs/host.access.log main;
location /test {
rewrite ^.+test/?(.*)$ /$1 break;
proxy_pass http://localhost:8090;
}
location /Additional {
rewrite ^.+Additional/?(.*)$ /$1 break;
proxy_pass http://localhost:8091;
}
location / {
root D:\test;
index index.html index.htm;
}
#error_page 404 /404.html;
# redirect server error pages to the static page /50x.html
#
error_page 500 502 503 504 /50x.html;
location = /50x.html {
root html;
}
# proxy the PHP scripts to Apache listening on 127.0.0.1:80
#
#location ~ \.php$ {
# proxy_pass http://127.0.0.1;
#}
# pass the PHP scripts to FastCGI server listening on 127.0.0.1:9000
#
#location ~ \.php$ {
# root html;
# fastcgi_pass 127.0.0.1:9000;
# fastcgi_index index.php;
# fastcgi_param SCRIPT_FILENAME /scripts$fastcgi_script_name;
# include fastcgi_params;
#}
# deny access to .htaccess files, if Apache's document root
# concurs with nginx's one
#
#location ~ /\.ht {
# deny all;
#}
}
可以相应追加更多需要用到的服务器
location /Additional {
rewrite ^.+Additional/?(.*)$ /$1 break;
proxy_pass http://localhost:8091;
}
小结：nginx反向代理绝对不是解决跨域的最佳方案，在开发、测试、正式环境下都需要配置相应的配置文件，万一后台的IP或端口改变都需要修改配置文件，而且作为反向代理它不过是做了一个跳转，在速度上是要比直连要慢的，性能也会有影响。跟后台的人好好商量，能改后台就该后台，吃顿饭喝顿酒，不行还有py呢！
