nginx 反向代理处理跨域问题

栏目: 服务器 · Nginx · 发布时间: 5年前

内容简介:原文链接:放两个神图,图片来自

原文链接: https://ssshooter.com/2019-05...

反向代理是什么

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

nginx 反向代理处理跨域问题

这是正向代理

nginx 反向代理处理跨域问题

这是反向代理

  • 正向代理是你发出请求的时候先经过代理服务器,所以实际上 发出请求的是代理服务器
  • 反向代理是 “代理你的目标服务器” ,请求目标服务器的代理,做一些处理后再真正请求。

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

测试环境的跨域

module.exports = {
  publicPath: '/',
  devServer: {
    proxy: {
      '/wiki': {
        target: 'http://xxx.com.cn', // 代理到的目标地址
        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
}

按照上面的配置启动测试环境之后,直接在浏览器输入 http://localhost/wiki/rest/api/2/user/picker 就等于访问 http://xxx.com.cn/rest/api/2/user/picker

在 nginx 配置

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

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

location /wiki/ {
    rewrite ^/wiki/(.*)$ /$1 break;
    proxy_pass http://xxx.com.cn;
}

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

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

按照上面的配置,重启 nginx ./nginx -s reload ,直接在浏览器输入 http://localhost/wiki/rest/api/2/user/picker 就等于访问 http://xxx.com.cn/rest/api/2/user/picker 啦。

附加的正则小知识

其实 $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 ,但是不加括号就不存在这个东西。

再会


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

失控的真相

失控的真相

[美] 迈克尔·帕特里克·林奇 / 赵亚男 / 中信出版社 / 2017-6 / 42.00元

编辑推荐 在信息泛滥的时代,知识变得无处不在。鼠标轻轻一点,我们就坐拥一座巨型图书馆。然而,我们并没有因此就离真相更近。相反,互联网的普及使人们早已习惯于凡事问搜索引擎,并形成了一种“搜索即相信”的认知模式。当社交网络把数字人类带入一个个彼此隔绝的线上群体中,我们清楚地看到,真相与谎言在互联网中交织,知识与观念混为一谈,情绪宣泄掩盖了事实分析。联网的世界让我们更容易看到彼此的观点,但同时也制......一起来看看 《失控的真相》 这本书的介绍吧!

URL 编码/解码
URL 编码/解码

URL 编码/解码

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具

HEX CMYK 转换工具
HEX CMYK 转换工具

HEX CMYK 互转工具