nginx 反向代理处理跨域问题

printempw 发布于2019-08-23 17:53 / 2305人阅读

摘要：原文链接反向代理是什么放两个神图，图片来自这里。反向代理是代理你的目标服务器，请求目标服务器的代理，做一些处理后再真正请求。在这篇文章里，反向代理用于处理跨域问题。

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

反向代理是什么

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

这是正向代理

这是反向代理

正向代理是你发出请求的时候先经过代理服务器，所以实际上发出请求的是代理服务器。

反向代理是“代理你的目标服务器”，请求目标服务器的代理，做一些处理后再真正请求。

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

测试环境的跨域

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

再会

服务器托管专线服务 nginx反向代理 nginx 反向代理cdn nginx反向代理https nginx反向代理nodejs

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/104293.html

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

摘要：三反向代理解决的原理将安装在本地，然后将项目部署于下，这样访问本地项目时用本地项目即可访问。这样浏览器之间的请求完全满足浏览器域名协议端口相同的同源策略，可在不改变后台接口的情况下避免跨域问题。一、问题背景说明：编写移动前端页面时需要访问后台系统接口。前端项目在本地（个人办公电脑）开发，后台接口存放后生产的后台服务器，本地的ajax请求无法直接访问后台接口，也就是遇到了跨域问题...

dongxiawu 2019-08-23 11:39 评论0 收藏0
通过nginx反向代理解决前端访问的跨域问题

摘要：三反向代理解决的原理将安装在本地，然后将项目部署于下，这样访问本地项目时用本地项目即可访问。这样浏览器之间的请求完全满足浏览器域名协议端口相同的同源策略，可在不改变后台接口的情况下避免跨域问题。一、问题背景说明：编写移动前端页面时需要访问后台系统接口。前端项目在本地（个人办公电脑）开发，后台接口存放后生产的后台服务器，本地的ajax请求无法直接访问后台接口，也就是遇到了跨域问题...

paulquei 2019-07-25 14:26 评论0 收藏0
Nginx

摘要：此外，其也能够提供强大的反向代理功能。是由为俄罗斯访问量第二的站点开发的，第一个公开版本发布于年月日。 keepalived+nginx 实现高可用双机热备 + 负载均衡架构 1 准备4个ubuntu16.04虚拟机（启用网卡二并使用桥接模式）:A服务器：192.168.0.103 主B服务器：192.168.0.104 主（备）前端工程师学习 Nginx ...

syoya 2019-07-25 14:06 评论0 收藏0
利用Nginx反向代理解决跨域问题

摘要：反向代理服务器对于客户端而言它就像是原始服务器，并且客户端不需要进行任何特别的设置。使用反向代理可能访问网页相对于之前响应会比较慢标签： Nginx,跨域问题在之前的分享的跨域资源共享的文章中，有提到要注意跨域时，如果要发送Cookie，Access-Control-Allow-Origin就不能设为*，必须指定明确的、与请求网页一致的域名。在此次项目开发中与他人协作中就遇到...

EscapedDog 2019-08-23 14:13 评论0 收藏0
利用Nginx反向代理解决跨域问题

摘要：反向代理服务器对于客户端而言它就像是原始服务器，并且客户端不需要进行任何特别的设置。使用反向代理可能访问网页相对于之前响应会比较慢标签： Nginx,跨域问题在之前的分享的跨域资源共享的文章中，有提到要注意跨域时，如果要发送Cookie，Access-Control-Allow-Origin就不能设为*，必须指定明确的、与请求网页一致的域名。在此次项目开发中与他人协作中就遇到...

YanceyOfficial 2019-07-25 14:36 评论0 收藏0