nginx 反向代理处理跨域问题

时间: 2019-06-02阅读: 214标签: 跨域

反向代理是什么

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


这是正向代理


这是反向代理

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

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


测试环境的跨域

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


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


吐血推荐

1.站长广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入...

2.休闲娱乐: 网页游戏  直播/交友   H5游戏

链接: http://www.fly63.com/article/detial/3508

缓存竟也能导致跨域问题!

由于页面设计需要,页面展示图片,并可点击下载按钮进行下载(需要前端打包多个图片,所以需要使用ajax请求图片获得二进制内容,不能直接使用img或a进行下载),如图:

js跨域访问问题

这里说的js跨域是指通过js在不同的域之间进行数据传输或通信,比如用ajax向一个不同的域请求数据,或者通过js获取页面中不同域的框架中(iframe)的数据。只要协议、域名、端口有任何一个不同,都被当作是不同的域。如果进行跨域访问

你应该了解的CORS

如果你和我一样,第一次遇到 CORS (跨域资源共享),你想让服务器接收那些你拼接的 Ajax 请求并处理他们。所以你去 stackoverflow.com 复制一段代码来设置一些 HTTP Headers ,让请求可以正常工作

reactjs中配置代理跨域

第一步,下载依赖 http-proxy-middleware;第二步,在src下建立setupProxy.js;第三步,在数据请求中直接请求,在真实url后添加/api即可,eg

vue项目打包后怎样优雅的解决跨域

在使用vue.js开发前端项目时,再结合webpack搞起各种依赖、各种插件进行开发,无疑给前端开发带来了很多便捷,就在解决跨域这个问题上,相信众多用vue.js的前端同僚们同我一样尝到了甜头

vue-cli3 中跨域解决方案

此方案只能用于开发环境,线上最好设置同源策略(遇到个后端,装你妈批),前后端不在同一服务器的情况下,前端要访问后端API,可通过在vue.config.js中配置代理服务器。

如何用Nginx解决前端跨域问题?

在开发静态页面时,类似Vue的应用,我们常会调用一些接口,这些接口极可能是跨域,然后浏览器就会报cross-origin问题不给调。最简单的解决方法,就是把浏览器设为忽略安全问题,设置--disable-web-security。

CORS跨域请求

浏览器的同源策略会导致跨域,这里同源策略又分为以下两种:DOM同源策略、XmlHttpRequest同源策略。只要协议、域名、端口有任何一个不同,都被当作是不同的域,之间的请求就是跨域操作。

JSONP技术栈_jsonp的使用

JSONP方案:前端提供 API 的方法,其实解耦还没有解的很干净,我们在设置script的src时直接给它传参,后端插入这个参数这就可以了。因为JSONP是通过动态创建Script实现的,动态创建Script只有GET请求没有POST请求

jsonp跨域原理,jsonp和ajax的区别?

Jsonp原理是动态创建一个script标签,利用script标签src属性访问没有限制,实现跨域。Ajax是页面无刷新请求数据操作,Jsonp不是真正的ajax请求。讲解Ajax 和 jsonp的区别,在jquery中使用jsonp

fly63.com版权所有,内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权,请与小编联系!情况属实本人将予以删除!

广告赞助文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全