通过nginx 反向代理解决前后端跨域访问的问题

现在前后端分离是大势所趋，优势很多，多人协同，更细维护方便等等。网上找了很多资料，终于解决了，简单记录一下过程，供需要的人参考，网上好多答案都不完整，没说清楚。

本文参考bloghttps://www.cnblogs.com/bninp/p/5694277.html。遇到问题一定要仔细分析，不要一头扎进去就开始各种百度，各种复制粘贴。其实这么多次解决问题过来，好多问题是你没理解到那个程度，所以不到问题解决的时候，有道是山重水复疑无路，柳暗花明又一村。这应该是解决技术问题一个共识了。

先说下场景，前端项目单独部署，然后需要访问后端的接口服务，ajax请求总报跨域请求问题。什么是跨域这里就不细说了，一句概括“跨域指协议名主机名端口不相同”。

所以思路是把nginx作为前端项目的服务容器，并修改nginx配置。修改如下

location / {
            root   html;
            index index.html index.htm;
        }

       # test
       location /apis {
           rewrite ^.+apis/?(.*)$ /$1 break;
           include uwsgi_params;
           proxy_pass   http://192.168.1.107:8080;
       }

两个location，上面的发布web项目，下面的配置真实访问接口。我修改了nginx的默认端口，改为8088

所以重启nginx服务后，浏览器通过localhost:8088 就可以访问到我的前端项目，这是由第一个location配置的结果；然后我接口调用http://localhost:8088/apis/dynamo/User/userSelAll_Query?username=admin，真实的接口地址实际上是

http://192.168.1.107:8080/dynamo/User/userSelAll_Query?username=admin，这里为了满足同源策略，所以先调用第二个location，用http://localhost:8088/apis作为代理替换了http://192.168.1.107:8080，这样的话http://localhost:8088/apis和http://localhost:8088是不是就可以同源了，结果却是如此。

function ajaxGet(url) {
            $.ajax({
                url: "http://localhost:8088/apis/dynamo/User/userSelAll_Query?username=admin",
                type: "GET",
                headers: {
                    "Authorization": "d4b343a3-9b46-4ffd-bb20-69711a86da92 4108adee-d16b-4c7e-a468-6f4160eab644 encrypt:clear",
                    "Content-Type": "application/json"
                },
                dataType: 'json',
                success: function(msg) {
                    alert("get success.");

                    $("#query_msg").remove();
                    $('#query-title').append('<div id="query_msg"> ' + JSON.stringify(msg) + '</div>');

                },
                error: function() {
                    //showMsg('异常');
                    alert("get failed.");
                }
            });
        }

好了就写到这里吧，以上问题完美解决。其实如果用java做后台，很少要这样解决跨域问题。由于我的项目环境是有人封装了框架，不能按标准流程配置了，所以只能用这种办法，因为这种办法修改服务器配置就可以了，比较简单。也有建议用jsonp的，但是那样的话后端接口也需要修改，工作量太大。

通过nginx 反向代理解决前后端跨域访问的问题

猜你喜欢