使用 package.json 配置代理解决 React 项目中的跨域请求问题

使用 package.json 配置代理解决 React 项目中的跨域请求问题

当我们在开发前端应用时，经常会遇到跨域请求的问题。为了解决这个问题，我们可以通过配置代理来实现在开发环境中向后端服务器发送请求。

在 React 项目中，我们可以使用 package.json 文件中的 proxy 字段来配置代理。这个字段可以帮助我们将前端应用的请求转发到指定的后端服务器上，从而避免跨域请求的限制。

下面是如何在 package.json 中配置代理的步骤：

1. 打开 package.json 文件： 在你的 React 项目中，找到 package.json 文件并打开它。

2. 添加 proxy 字段： 在 package.json 文件的顶层对象中添加一个名为 proxy 的字段，并将其值设置为你想要代理的后端服务器的基本 URL。例如：

   "proxy": "https://dev.usemock.com"
   

   这个配置告诉开发服务器将所有不匹配其他静态文件的请求转发到 https://dev.usemock.com。

3. 重启开发服务器： 保存 package.json 文件后，确保重新启动你的开发服务器。你可以使用 npm start 或 yarn start 命令来重新启动。

4. 发送请求： 现在，你可以在前端应用中使用相对路径来发送请求，而不需要担心跨域问题。例如，在你的组件中使用 axios 或其他 HTTP 客户端库发送请求：

   import axios from 'axios';
   
   axios.get('/65d55e87c87ce4342e1285ab/todos')
     .then(response => console.log('请求成功', response.data))
     .catch(error => console.error('请求失败', error));
   

5. 效果

通过配置 proxy 字段，我们可以轻松地在开发环境中与后端服务器进行交互，而无需担心跨域请求的问题。这样可以加快开发速度并提高开发效率。

参考

• 使用 package.json 配置代理解决 React 项目中的跨域请求问题
• 完整代码