解决跨域:
1. 正向代理——开发环境:一个位于客户端和目标服务器之间的代理服务器。为了获取到目标服务器的内容,客户端向代理服务器发送一个请求,代理服务器帮助我们去目标服务器里面获取数据并返回给我们。
2. 反向代理——上线环境:可以通过代理服务器来接受网络上的请求链接,然后将这个请求转发给内部的网络服务器,并把这个服务器上得到的数据返回给网络请求的客户端。此时代理服务器对外的表现就是一个反向代理。
今天看了个视频,又在网上一搜,发现实现正向代理解决跨域问题的方案有很多,下面总结一下:
方案一:
安装 http-proxy-middleware :
npm install http-proxy-middleware --save
在src目录下创建 setupProxy.js 文件:
配置 proxy :
//解决跨域问题
const proxy = require('http-proxy-middleware');
console.log(proxy);
module.exports = function(app) {
app.use(
'/api',
proxy.createProxyMiddleware({
target:'http://localhost:3000', // 跨域的域名
changeOrigin: true,//默认false,是否需要改变原始主机头为目标URL
pathRewrite: {
"^/api": ""
}
})
);
};
可以给给 axios 配置 /api,实现跨域:
axios.defaults.baseURL = '/api';
我们这次react项目中用的便是这一种。
这样就可以解决跨域问题。
注意在实际运用时,target 内的跨域域名别忘记改成自己的。
方案二:
打开项目文件,根据路径 \node_modules\react-scripts\config 找到 webpackDevServer.config.js 文件,如下图所示:
在该文件中找到以下代码:
配置proxy:
proxy: {
'/api':{
target:'http://localhost:3000', // 跨域的域名
changeOrigin:true,//默认false,是否需要改变原始主机头为目标URL
"pathRewrite": {
"^/api" : "/" // 重写请求,比如我们访问的是api,那么请求会被解析为/
}
}
},
这样就可以解决跨域问题。
注意在实际运用时,target 内的跨域域名别忘记改成自己的。
方案三:
打开react项目中的package.json文件,添加proxy配置,具体配置项如下:
"proxy":"http://localhost:3000" // 跨域的域名
当然你也可以写完整:
proxy: {
'/api':{
target:'http://localhost:3000', // 跨域的域名
changeOrigin:true,//默认false,是否需要改变原始主机头为目标URL
}
}
这样就可以解决跨域问题。
注意在实际运用时,target 内的跨域域名别忘记改成自己的。