以下是我对服务器代理的一些总结,如有错误,欢迎指出。
所谓的服务器代理,是碍于浏览器的同源策略,当域名,协议或者端口号不同时,就是不同源,访问时就会出现跨域问题,那么浏览器之间有跨域,但是服务器之间不存在跨域,所以我们把请求交给服务器去帮我们发送,也就是服务器代理,跨域时可以使用CORS、服务器代理等方式解决,这里讲一下react中的服务器代理。
1.在package.json中配置
"proxy":"https://baidu.com",
可行,通过该方式可以实现服务器代理,但当我们需要配置多个代理时,如下图
"proxy":{
"/aaa":{
"target":"https://www.baidu.com",
"changeOrigin":"true"
},
"/bbb":{
"target":"https://www.taobao.com",
"changeOrigin":"true"
}
}
就会报错
When specified, "proxy" in package.json must be a string.
Instead, the type of "proxy" was "object".
Either remove "proxy" from package.json, or make it a string.
提示我们该方法不能传入对象,只能传入字符串,这个是由于create-react-app的设置,create-react-app2.0以上的版本都会出现这个现象,因此用该方法配置多个代理行不通。
2.http-proxy-middleware
这个看字面意思就清晰了,http代理中间件,用于处理服务器代理,那么首先要安装
npm install http-proxy-middleware -S
然后在src目录下创建一个setupProxy.js文件进行配置
//setupProxy.js
const {createProxyMiddleware} = require('http-proxy-middleware')
module.exports = function (app) {
app.use('/api', // 指定需要转发的请求
createProxyMiddleware({
target: "https://www.baidu.com", //指定转发的目标地址
changeOrigin: true,
pathRewrite: {
"^/api": "" // 字面意思是路径重写,其实就是把url地址中指定片段替换掉
}
}));
}
react服务器代理的原理是其内部的webpack-dev-server,其对请求进行监听,当监听到指定的请求就
将其转发到目标地址,由于服务器之间不存在没有同源策略,通过此方法实现跨域。
(逆战)