前言: 目前项目开发中大都采用的是完全前后端分离开发模式,各自独立进行开发,虽然最后前后端都会部署到同一台服务器上,但在开发过程中前后需要进行联调,这个过程难免会遇到跨域问题。
解决跨域问题:
- 使用
react
脚手架create-react-app
搭建react基础项目。 - 运行
npm run eject
展开项目中的详细配置
注意:项目中只能执行一次,展开后不可恢复;
如果项目需要相关配置文件,建议刚开始执行。
但在展开的webpack配置中,并没有找到 proxy 相关配置。
create-react-app
版本低于 2.0 时,可以直接在package.json
中增加proxy
配置项,如下:
"proxy": {
"/api/**": {
"target": "http://blog.csdn.net/zlq_csdn", // 目标服务器
"changeOrigin": true, // 默认false,是否改变原始主机头为目标URL
"pathRewrite": {
"^/api": "/", // 将 '/api' 重写为 '/'
"secure": false, // 如果为https的接口,需要配置该参数为true
}
}
},
create-react-app
版本高于 2.0 时,在package.json
中只能配置为 string 类型了,如下:
"proxy": "http://blog.csdn.net/zlq_csdn",
- 推荐方案:在
src
目录下新建setupProxy.js
文件,并依赖http-proxy-middleware
中间件来配置代理服务(可配置多项),如下:
// 配置代理中间件,以进行连接、表达、浏览器同步等。
const { createProxyMiddleware } = require("http-proxy-middleware");
// 配置代理服务
const apiProxy = createProxyMiddleware("/api", {
target: "http://localhost:3001",
secure: false,
changeOrigin: true,
pathRewrite: {
"^/api": "/api"
}
});
const apiProxy2 = createProxyMiddleware("/api2", {
target: "http://localhost:3002",
secure: false,
changeOrigin: true,
pathRewrite: {
"^/api2": "/api2"
}
});
module.exports = function(app) {
app.use(apiProxy);
app.use(apiProxy2);
}