通过 http-proxy-middleware 跨域代理与添加自定义cookie

废话不多说，直接先上代码

const proxy = require("http-proxy-middleware");module.exports = function(app) {app.use(proxy("/mid-api/**", {target: "http://api.server.com/",changeOrigin: true,pathRewrite: {'^/mid-api': '',},onProxyReq(proxyReq, req, res) {proxyReq.setHeader('cookie', 'SERVER_TOKEN=153b8baf-4b2d');}}));app.use(proxy("/api-2/**", {target: "https://easy-mock.com/mock/5c0f31837214cf627b8d43f0/",changeOrigin: true,}));
};

简单解释一下：

以上代码定义了两个接口路径代理，/mid-adp/ 和 /api-2/ 只要是匹配到这两个路径的请求，都会代理到target 路径上。
pathRewrite：顾名思义，就是重写路径，如上例子：pathRewrite: {'^/mid-api': ''} // 最终会把/mid-api替换为空。比如我们请求的路径是：http://localhost:3000/mid-api/user/user-info，最终发出去的请求路径是：http://localhost:3000/user/user-info。这有什么好处呢？比如项目中你A模块需要代理到A服务器，B模块代理到B服务器，但接口地址都是同一个（user/user-info），就可以通过这个区分开来
重点说一下onProxyReq()，非常重要，我们服务器通常会通过cookie或者token来验证用户身份，那我们就可以通过代理时给请求头加入相应的信息，这样就可以通过服务器的身份验证了

onProxyReq(proxyReq, req, res) {proxyReq.setHeader('cookie', 'ULS_TOKEN=1234567890');}

顺便说一下，如果是 create-react-app（v2.0以上）项目设置代理方法：

最简单就是在package.json加 proxy属性，但只能是代理服务器地址的字符串："proxy": "abc.com.baidu.com"，这样请求自动会使用这个代理。
需要复杂的设置，那就要在src目录下创建一个js文件：setupProxy.js，然后把上面的代码加进去就可以了，请求自动就会走设置的代理，亲测有效

通过 http-proxy-middleware 跨域代理与添加自定义cookie相关推荐

全局配置axios、axios 拦截器和 proxy 跨域代理
目录一.全局配置axios 1. 为什么要全局配置 axios 2. 如何全局配置 axios 3. 在 vue3 的项目中全局配置axios 4. 在 vue2 的项目中全局配置 axios ...
vue3.0-axios拦截器、proxy跨域代理
目录 1. vue-cli 1)vue-cli 2)安装vue-cli ①解决Windows PowerShell不识别vue命令的问题 3)创建项目 4)基于vue ui创建vue项目 5)基于命令 ...
【react 跨域代理】
react 跨域代理提示:以下是本篇文章正文内容,下面案例可供参考一.package.json 里添加"proxy": "http://localhost:5000& ...
vue加跨域代理静态文件404_vue-cli 设置跨域代理线上地址报404
vue-cli 设置跨域代理,本地正常访问,线上地址报404.这是什么原因? vue-cli中跨域代理设置: module.exports = { dev: { // Paths assetsSubD ...
vue-cli设置跨域代理 + 开发/生成环境简单请求接口设置
1.设置dev.proxyTable实现开发环境的跨域代理: 在config文件夹下index.js文件内: 1 module.exports = { 2 dev: { 3 proxyTable: { ...
vue-cli2.x统一配置接口请求地址和开发环境的跨域代理
1.修改config/dev.env.js(开发环境的baseURL地址统一配置) 2.修改config/prod.env.js(线上环境的baseURL地址统一配置) 3.修改config/inde ...
前台关于跨域的警告A cookie associated with a cross-site resource at .........，代理服务器
前台关于跨域的警告A cookie associated with a cross-site resource at -,代理服务器 A cookie associated with a cross- ...
面试官问：跨域请求如何携带cookie?
大家好,我是若‍川.持续组织了6个月源码共读活动,感兴趣的可以点此加我微信 ruochuan12 参与,每周大家一起学习200行左右的源码,共同进步.同时极力推荐订阅我写的<学习源码整体架构系列 ...
谷歌浏览器升级到91出现跨域问题，导致cookie保存的sessionId不一样
先来说一下问题: 谷歌浏览器升级到91之后出现一个跨域问题,导致cookie保存的接口sessionId不一致,从而后台出现session不一致问题.如下图: 这是第一个接口: 这是第二个接口这本应 ...
Ajax跨域请求时携带cookie
在使用Ajax技术发送跨域请求时,默认情况下是不会在请求中携带cookie信息的. 如果需要在跨域请求中携带cookie,则需要对客户端和服务器都进行设置. 客户端代码: xhr.withCreden ...

通过 http-proxy-middleware 跨域代理与添加自定义cookie

通过 http-proxy-middleware 跨域代理与添加自定义cookie相关推荐

最新文章

热门文章