内容简介:普及一下这个插件的一些使用方法,只讲解一些常用,但有些生涩的地方,具体的还是得看官方文档先说说这个插件是干嘛的吧。The one-liner node.js http-proxy middleware for connect, express and browser-sync
普及一下这个插件的一些使用方法,只讲解一些常用,但有些生涩的地方,具体的还是得看官方文档
先说说这个插件是干嘛的吧。
The one-liner node.js http-proxy middleware for connect, express and browser-sync
Node.js proxying made simple. Configure proxy middleware with ease for connect, express, browser-sync and many more.
Powered by the popular Nodejitsu http-proxy .
我的理解,就是一个中间件,是http-proxy的封装,能给express,connect browser-sync等使用。
最常用在什么地方?
用来跨域的,例如跟webpack-dev-server配合使用是现在最流行的吧,vue react等一些脚手架 工具 中也已经集成了,所以你配置几行代码,就能跨域了。
proxyTable: { '/api': { target: 'http://localhost:3000',// 后端真实接口地址 changeOrigin: true, } }, 复制代码
发出去的正常请求呢就是
'http://localhost:8000/api/users/info' 复制代码
pathRewrite的作用
但是,我们知道,公司内部的很多接口,不是api开头的,直接users,classify,top等开头,不可能写很多匹配规则吧,那怎么办,pathRewrite可以随意修改路径,匹配api,然后变成空。
proxyTable: { '/api': { target: 'http://localhost:3000', // 后端真实接口地址 changeOrigin: true, pathRewrite: { '^/api': '/api' //重写, } } }, 复制代码
真实请求接口。
"http://localhost:3000/users/info" 复制代码
router的作用
可以理解就是重写target,但是注意的是,但使用时一定要带上http://的一个完整url地址
使用
axios.get('http://localhost:3000/rest/books/123') -> http://localhost:3000/rest/books/123 //携带http头 复制代码
配置
const routers = { '/rest': 'http://localhost:30001' }; const proxyTable = { '/api': { target: 'http://localhost:3000', changeOrigin: true, logLevel: 'debug', pathRewrite: { '^/api': '' }, router: routers } }; 复制代码
为什么我推荐用携带http://开头的完整路径呢,因为当发送出去的请求地址,同时匹配'/api' '/rest'的时候,其实也会去rest的那个服务器地址下,容易混淆,下面请看。
鉴权
如果只想简单的验证接口是否需要token,或者我们在用一些收费接口的时候,总需要携带一些token,可以这么做。
proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true, pathRewrite: { '^/api': '' }, headers: { token: 'token' } } 复制代码
referer防盗链
有时候一些引用第三方的图片会破图的现象,可以用这种办法。
proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true, pathRewrite: { '^/api': '' }, headers: { referer: '' // } } 复制代码
onProxyRes(cookie跨域的场景)
还有一个业务场景就是,当我们本地调试测试或者线上代码的时候,会因为后端cookie设置了一些安全策略,而导致本地开发环境cookie丢失。这是因为由于同源策略的限制,所读取的cookie为跨域请求接口所在域的cookie,而非当前页。如果想实现当前页cookie的写入,则用以下办法。
虽然官方文档有说可以用cookieDomainRewrite 和cookiePathRewrite来搭配,但是曾经看到一种挺好的办法。
proxy: { '/api': { target: 'http://localhost:3000', changeOrigin: true, pathRewrite: { '^/api': '' }, headers: { referer: '' // }, onProxyRes(proxyRes) { const key = 'set-cookie'; if (proxyRes.headers[key]) { const cookies = proxyRes.headers[key].join('').split(' '); // 切割掉一些严格的安全校验,只保留了第一项和Path,这样secure、domain都被忽略了。 proxyRes.headers[key] = [cookies[0], 'Path=/'].join(' '); } } } 复制代码
值得一提的是,axios等ajax库,得配置withCredentials
websocket
加多一个就好 ws: true
额外的
在一些spa + node.js + 后端架构的项目里,或者一些ssr项目上,这个插件也可以在express中使用,如果你自己不想写代理服务器的话。
var express = require('express') var proxy = require('../../index') // require('http-proxy-middleware'); var option = proxy({ target: 'www.xxx.com', changeOrigin: true, logLevel: 'debug' }) var app = express() app.use('/api', option) app.listen(3000) 复制代码
以上所述就是小编给大家介绍的《http-proxy-middleware插件解决跨域、鉴权、图片防盗链》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- IIS通过URL重写实现防盗链
- 传说中图片防盗链的爱恨情仇
- Nginx学习之如何搭建文件防盗链服务
- 详解Apache配置图片防盗链以及隐藏版本信息
- 指纹锁就安全了?防火防盗还得防AI
- SpringBoot集成FastDFS+Nginx整合基于Token的防盗链
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Visual Thinking
Colin Ware / Morgan Kaufmann / 2008-4-18 / USD 49.95
Increasingly, designers need to present information in ways that aid their audiences thinking process. Fortunately, results from the relatively new science of human visual perception provide valuable ......一起来看看 《Visual Thinking》 这本书的介绍吧!
CSS 压缩/解压工具
在线压缩/解压 CSS 代码
SHA 加密
SHA 加密工具