JAVA高级面试进阶训练营视频教程

admin

前端跨域，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呢！