前言
由于在react进行本地调测时,访问后端接口会遇见跨域问题,所以我们需要通过代理的方式来解决跨域问题(服务端之间通信不存在跨域问题)
本记录使用的"react": “^18.2.0”
一、显示隐藏的webpack配置文件
注:react是把webpack隐藏的,本地调测依赖于webpack的代理策略,所以首先需要把webpack的配置文件显示(此过程是不可逆的)
npm run eject
二、增加代理配置
注:以下2个方式只能选一种,否则会导致多次代理,接口报404
方法1、修改webpackDevServer.config.js文件中的proxy
【1】搜索到‘proxy’字段
【2】修改proxy类似如下配置:
proxy: {
'/api': {
target: 'http://localhost:8081',
ws: true,
changeOrigin: true,
// pathRewrite: {'^/api': ''}
}
}
方法2 、在新增的setupProxy.js文件增加proxy
【1】在项目的src文件目录下创建名为setupProxy.js的文件(必须是这个名字,webpack只认他)
【2】在文件中增加以下proxy配置
const proxy = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
proxy('/api', {
target: "http://localhost:8081",
changeOrigin: true,
// pathRewrite: {'^/api': ""}
}),
)
}
三、npm run start 启动本地环境编译
以api开头的API接口可以访问服务端成功,如下图: