通过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的,但是那样的话后端接口也需要修改,工作量太大也不安全。

 

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

老朱自强不息

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值