Java自学者论坛

 找回密码
 立即注册

手机号码,快捷登录

恭喜Java自学者论坛(https://www.javazxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,会员资料板块,购买链接:点击进入购买VIP会员

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

Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程Go语言视频零基础入门到精通Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程SpringBoot2.X入门到高级使用教程大数据培训第六期全套视频教程深度学习(CNN RNN GAN)算法原理Java亿级流量电商系统视频教程
互联网架构师视频教程年薪50万Spark2.0从入门到精通年薪50万!人工智能学习路线教程年薪50万大数据入门到精通学习路线年薪50万机器学习入门到精通教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程MySQL入门到精通教程
查看: 632|回复: 0

nginx反向代理-解决前端跨域问题

[复制链接]
  • TA的每日心情
    奋斗
    2024-11-24 15:47
  • 签到天数: 804 天

    [LV.10]以坛为家III

    2053

    主题

    2111

    帖子

    72万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9

    积分
    726782
    发表于 2021-6-28 10:25:28 | 显示全部楼层 |阅读模式

    转自:https://www.cnblogs.com/renjing/p/6394725.html

     

    1.定义

    跨域是指a页面想获取b页面资源,如果a、b页面的协议、域名、端口、子域名不同,所进行的访问行动都是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源。注意:跨域限制访问,其实是浏览器的限制。理解这一点很重要!!!

    2.跨域访问示例

    假设有两个网站,A网站部署在:http://localhost:81 即本地ip端口81上;B网站部署在:http://localhost:82 即本地ip端口82上。

    现在A网站的页面想去访问B网站的信息,A网站页面的代码如下(这里使用jquery的异步请求):

    复制代码
    <h2>Index</h2>
    <div id="show"></div>
    <script type="text/javascript">
            $(function () {
                $.get("http://localhost:82/api/values", {}, function (result) {
                    $("#show").html(result);
                })
            })
    复制代码

    这是浏览器会提示如下错误信息:

    3.nginx反向代理解决跨域问题

    3.1nginx配置

    关于nginx的配置可以查看另一篇博文:http://www.cnblogs.com/renjing/p/6126284.html。找到nginx的配置文件“nginx.conf”,修改一下信息

    复制代码
    server {
            listen       80; #监听80端口,可以改成其他端口
            server_name  localhost; # 当前服务的域名
    
            #charset koi8-r;
    
            #access_log  logs/host.access.log  main;
    
            location / {
                proxy_pass http://localhost:81;
                proxy_redirect default;
            }
    
    		location /apis { #添加访问目录为/apis的代理配置
    			rewrite  ^/apis/(.*)$ /$1 break;
    			proxy_pass   http://localhost:82;
           }
    #以下配置省略
    复制代码

    配置解释:

    1.由配置信息可知,我们让nginx监听localhost的80端口,网站A与网站B的访问都是经过localhost的80端口进行访问。

    2.我们特殊配置了一个“/apis”目录的访问,并且对url执行了重写,最后使以“/apis”开头的地址都转到“http://localhost:82”进行处理。

    3.rewrite  ^/apis/(.*)$ /$1 break; 

    代表重写拦截进来的请求,并且只能对域名后边以“/apis”开头的起作用,例如www.a.com/apis/msg?x=1重写。只对/apis重写。

      rewrite后面的参数是一个简单的正则 ^/apis/(.*)$ ,$1代表正则中的第一个(),$2代表第二个()的值,以此类推。

      break代表匹配一个之后停止匹配。

    3.2 访问地址修改

    既然配置了nginx,那么所有的访问都要走nginx,而不是走网站原本的地址(A网站localhost:81,B网站localhost:82)。所以要修改A网站中的ajax访问地址,把访问地址由

    “http://localhost:82/api/values”改成》》》“/apis/api/values”。如下代码:

    复制代码
    <h2>Index</h2>
    <div id="show"></div>
    
    <script type="text/javascript">
            $(function () {
                $.get("/apis/api/values", {}, function (result) {
                    $("#show").html(result);
                })
            })
    </script>
    复制代码

     4.网站的访问

    5.总结

    浏览器跨域的解决方式有很多种:

    1.jsonp 需要目标服务器配合一个callback函数。

      2.window.name+iframe 需要目标服务器响应window.name。

      3.window.location.hash+iframe 同样需要目标服务器作处理。

      4.html5的 postMessage+ifrme 这个也是需要目标服务器或者说是目标页面写一个postMessage,主要侧重于前端通讯。

      5.CORS  需要服务器设置header :Access-Control-Allow-Origin。

      6.nginx反向代理 这个方法一般很少有人提及,但是他可以不用目标服务器配合,不过需要你搭建一个中转nginx服务器,用于转发请求。

    个人觉得6才是正规的解决方案

    哎...今天够累的,签到来了1...
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|小黑屋|Java自学者论坛 ( 声明:本站文章及资料整理自互联网,用于Java自学者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2024-12-23 09:29 , Processed in 0.148257 second(s), 27 queries .

    Powered by Discuz! X3.4

    Copyright © 2001-2021, Tencent Cloud.

    快速回复 返回顶部 返回列表