create-react-app 构建的项目中配置proxy

前言: 目前项目开发中大都采用的是完全前后端分离开发模式,各自独立进行开发,虽然最后前后端都会部署到同一台服务器上,但在开发过程中前后需要进行联调,这个过程难免会遇到跨域问题。

解决跨域问题:

  1. 使用 react 脚手架 create-react-app 搭建react基础项目。
  2. 运行 npm run eject 展开项目中的详细配置

注意:项目中只能执行一次,展开后不可恢复;
如果项目需要相关配置文件,建议刚开始执行。
但在展开的webpack配置中,并没有找到 proxy 相关配置。

  1. 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
		}
	}
},
  1. create-react-app 版本高于 2.0 时,在 package.json 中只能配置为 string 类型了,如下:
"proxy": "http://blog.csdn.net/zlq_csdn",
  1. 推荐方案:在 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);
}

你可能感兴趣的:(React)