内容简介:普及一下这个插件的一些使用方法,只讲解一些常用,但有些生涩的地方,具体的还是得看官方文档先说说这个插件是干嘛的吧。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的防盗链
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
奔跑吧 Linux内核
张天飞 / 人民邮电出版社 / 2017-9-1 / CNY 158.00
本书内容基于Linux4.x内核,主要选取了Linux内核中比较基本和常用的内存管理、进程管理、并发与同步,以及中断管理这4个内核模块进行讲述。全书共分为6章,依次介绍了ARM体系结构、Linux内存管理、进程调度管理、并发与同步、中断管理、内核调试技巧等内容。本书的每节内容都是一个Linux内核的话题或者技术点,读者可以根据每小节前的问题进行思考,进而围绕问题进行内核源代码的分析。 本书内......一起来看看 《奔跑吧 Linux内核》 这本书的介绍吧!