react配置服务器代理

以下是我对服务器代理的一些总结，如有错误，欢迎指出。

所谓的服务器代理，是碍于浏览器的同源策略，当域名，协议或者端口号不同时，就是不同源，访问时就会出现跨域问题，那么浏览器之间有跨域，但是服务器之间不存在跨域，所以我们把请求交给服务器去帮我们发送，也就是服务器代理，跨域时可以使用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，其对请求进行监听，当监听到指定的请求就
将其转发到目标地址，由于服务器之间不存在没有同源策略，通过此方法实现跨域。

(逆战)