react如何进行项目配置代理

一、前言

二、配置方法

三、总结

前言：

在使用React创建应用程序时，配置代理的目的是为了解决跨域请求的问题。跨域请求是指在浏览器中，一个站点的Web应用程序向另一个不同域名的站点发送请求。由于浏览器的安全策略，这些跨域请求通常会被阻止。

通过配置代理，我们可以将所有的API请求发送到同一域名下，然后在该域名下进行代理转发到实际的API服务器上。这样就绕过了浏览器的跨域请求限制，使得我们可以在开发环境中顺利地进行。

配置方法：

一、要在React项目中进行代理配置，你可以使用`http-proxy-middleware`库。以下是配置代理的步骤：

安装http-proxy-middleware库：

npm install http-proxy-middleware --save

在项目根目录下创建一个名为setupProxy.js的文件。
在setupProxy.js文件中，导入http-proxy-middleware库和需要代理的请求地址：
```
const { createProxyMiddleware } = require('http-proxy-middleware');module.exports = function(app) {app.use('/api',createProxyMiddleware({target: 'http://your_api_server_address',changeOrigin: true,}));
};
```
这里假设你的API服务器地址为http://your_api_server_address，并且你希望将以/api开头的请求代理到该地址上。
启动开发服务器时，create-react-app会自动检测并加载setupProxy.js文件中的代理配置。所以你无需进行其他额外的配置。
现在，当你在React应用中发起以/api开头的请求时，它们将被代理到指定的API服务器地址。

二、要在React项目中进行代理配置，你可以使用以下步骤：

在根目录下创建一个 setupProxy.js 文件。

在 setupProxy.js 中配置代理，示例如下：

const { createProxyMiddleware } = require('http-proxy-middleware');module.exports = function(app) {app.use('/api',createProxyMiddleware({target: 'http://localhost:3001',changeOrigin: true,// pathRewrite: {//   '^/api': '',// },}));
};

复制插入

上面的配置代表将 /api 请求转发到 http://localhost:3001 服务器。

target 代表目标服务器的地址，可以是一个字符串或一个对象。

changeOrigin 代表是否改变请求头中的源地址，在使用反向代理时需要设置为 true。

pathRewrite 可以用于替换请求路径，如上面代码中的注释所示，如果请求路径中包含 /api，则替换为空字符串。
在 package.json 的 scripts 中添加 "start": "react-scripts start & node server.js"，其中 server.js 是你的后端服务器入口文件。
运行 npm start 启动项目，此时访问 /api 路径会被代理到 http://localhost:3001 服务器。