nginx反向代理,反向代理处理跨域难题

2020-01-26 作者:网站首页   |   浏览(188)

时间: 2019-06-02阅读: 251标签: 跨域反向代理是什么

1.定义

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

放两个神图,图片来自这里。

2.跨域访问示例

假设有两个网站,A网站部署在: 即本地ip端口81上;B网站部署在: 即本地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);
            })
        })

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

yzc216亚洲城 1

这是正向代理

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

这是反向代理

3.1nginx配置

关于nginx的配置可以查看另一篇博文:

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”开头的地址都转到“

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访问地址,把访问地址由

yzc216亚洲城 2yzc216亚洲城 3

<h2>Index</h2>
<div id="show"></div>

<script type="text/javascript">
        $(function () {
            $.get("/apis/api/values", {}, function (result) {
                $("#show").html(result);
            })
        })
</script>

View Code

在这篇文章里,反向代理用于处理跨域问题

yzc216亚洲城, 4.网站的访问

yzc216亚洲城 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才是正规的解决方案

 

module.exports = { publicPath: '/', devServer: { proxy: { '/wiki': { target: '', // 代理到的目标地址 pathRewrite: { '^/wiki': '' }, // 重写部分路径 ws: true, // 是否代理 websockets changeOrigin: true, }, }, },}

我们神奇的 webpack 有一个可以帮你实现测试跨域的插件,相信大家都比较熟悉,本质上这个插件的功能来自http-proxy-middleware。

* 关于 changeOrigin:这个选项的作用真的看不懂(下面是源码),看代码貌似是改变 headers 的 host 字段,但是实际上我修改成 true 和 false 测试,请求头好像并没有变化。但是以前的一个项目中有一个情况是必须把这个选项设定为 true 才能正常跨域,所以保险起见设 true。这个问题先放下吧,或者大家知道的话在评论区留言指导一下 OTL。

// 附源码if (options.changeOrigin) { outgoing.headers.host = required(outgoing.port, options[forward || 'target'].protocol)  !hasPort(outgoing.host) ? outgoing.host   ':'   outgoing.port : outgoing.host}

按照上面的配置启动测试环境之后,直接在浏览器输入就等于访问。

在 nginx 配置

联动一下之前的普通地址配置。

在这次要做的配置甚至没有上次相对位置的理解难,写法都跟 node 的配置差不多,只需要两句:

location /wiki/ { rewrite ^/wiki/(.*)$ /$1 break; proxy_pass ;}

rewrite 的语法是(来自文档):rewrite regex replacement [flag];

所以上面的效果是匹配^/wiki/(.*)$然后替换为/加匹配到的后面括号后的分块。

按照上面的配置,重启 nginx./nginx -s reload,直接在浏览器输入就等于访问啦。

附加的正则小知识

其实$1在 JavaScript 的正则里也能使用:

let reg = /^/wiki/(.*)$/'/wiki/2111edqd'.replace(reg, '$1')// = 2111edqd

在这里,括号的作用就是用于匹配一个分块。作为对比再举一个例子:

let reg = /^/wiki/(.*)$/let reg2 = /^/wiki/.*$/// 其实不用括号也完全可以匹配你需要的字符串// 但是在 match 的时候你就能看到区别'/wiki/2111edqd'.match(reg)// 输出 ["/wiki/2111edqd", "2111edqd", index: 0, input: "/wiki/2111edqd", groups: undefined]'/wiki/2111edqd'.match(reg2)// 输出 ["/wiki/2111edqd", index: 0, input: "/wiki/2111edqd", groups: undefined]

reg 输出的数组的第二个参数就是所谓的$1,如果后面还有其他括号分组就会有$2、$3,但是不加括号就不存在这个东西。

原文链接:-05

本文由yzc216亚洲城发布于网站首页,转载请注明出处:nginx反向代理,反向代理处理跨域难题

关键词: yzc216亚洲城