1, 下载安装代理模块
npm install http-proxy-middleware --save
2, 在src目录中新建setupProxy.js文件,在文件中放入如下代码(注意是src目录,不是根目录):
const { createProxyMiddleware } = require('http-proxy-middleware')
module.exports = function (app) {
app.use(createProxyMiddleware('/api',
{
target: 'http://127.0.0.1:3000',
changeOrigin: true,
pathRewrite: {
"^/api": ""
}
})
)
}
附加:
设置项目端口号: node_modules/react-scripts/scripts/start.js
也可以通过指令 npm run eject 把服务器配置暴漏出来, 修改scripts/start.js (这个指令不可逆)
使用vite构建vue项目和react项目,配置代理等信息的方式是一样的
在vite.config.js中加入以下代码 (针对react,可全选替换)
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import { fileURLToPath, URL } from "node:url";
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
resolve: {
alias: {
"@": fileURLToPath(new URL("./src", import.meta.url)),
},
},
base: "./",
server: {
host: "localhost",
open: true,
port: 3000,
proxy: {
"/myDouyu": {
target: "http://open.douyucdn.cn/api/RoomApi",
changeOrigin: true,
rewrite: (path) => path.replace(/^\/myDouyu/, ""),
},
},
}
})