前端跨域，nginx反向代理的解决方案

最近接到一个项目，后台接口已经完成且已经部署到服务器上，我负责前台页面开发。由于本地开发存在跨域问题，于是我想到了使用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://www.aa.com: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呢！

 

附带一些nginx常用操作命令

nginx 服务器重启命令，关闭
nginx -s reload ：修改配置后重新加载生效
nginx -s reopen ：重新打开日志文件
nginx -t -c /path/to/nginx.conf 测试nginx配置文件是否正确

关闭nginx：
nginx -s stop :快速停止nginx
quit ：完整有序的停止nginx

其他的停止nginx 方式：

ps -ef | grep nginx

kill -QUIT 主进程号 ：从容停止Nginx
kill -TERM 主进程号 ：快速停止Nginx
pkill -9 nginx ：强制停止Nginx

 

启动nginx:
nginx -c /path/to/nginx.conf

转载于:https://my.oschina.net/u/3463305/blog/1787588