使用 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 項目中的跨域請求問題
• 完整代碼