React前端Axios请求遇CORS跨域错误，无后端权限求解决方案

错误原因 #

浏览器的同源策略会限制从当前域名加载的脚本向其他域名的API发起请求，除非目标服务器返回Access-Control-Allow-Origin响应头，明确允许当前域名的跨域请求。

Postman这类工具不受浏览器同源策略约束，所以能正常请求；但你的React项目运行在前端域名下，请求目标API时，服务器未返回允许跨域的响应头，浏览器就触发CORS拦截，抛出AxiosError: Network Error。

可行解决办法（无后端权限时） #

1. 配置React开发代理 #

在React项目的package.json中添加代理配置，让开发服务器自动转发请求，规避跨域限制：

"proxy": "https://api.wisecapitals.com"

然后修改Axios请求地址为相对路径：

const response = await axios.post('/cronjobs/fetchXERate', {
  from: 'USD',
  to: 'LKR'
}, {
  auth: {
    username: 'ronak',
    password: 'password123test'
  }
});

注意：该方案仅适用于开发环境，生产环境需部署独立代理服务。

2. 搭建自定义Node.js代理服务器 #

如果React自带代理无法满足需求，可以自己写一个简单的Node代理，作为请求中转：

// proxy.js
const express = require('express');
const axios = require('axios');
const app = express();
const port = 3001;

app.use(express.json());

app.post('/cronjobs/fetchXERate', async (req, res) => {
  try {
    const response = await axios.post('https://api.wisecapitals.com/cronjobs/fetchXERate', req.body, {
      auth: {
        username: 'ronak',
        password: 'password123test'
      }
    });
    res.send(response.data);
  } catch (error) {
    res.status(error.response?.status || 500).send(error.message);
  }
});

app.listen(port, () => {
  console.log(`Proxy server running on port ${port}`);
});

启动代理后，将React中的请求地址改为http://localhost:3001/cronjobs/fetchXERate。该方案可用于生产环境，只需将代理服务器部署到线上。

3. 浏览器临时禁用CORS（仅开发测试用） #

• Chrome：右键快捷方式，在目标栏末尾添加 --disable-web-security --user-data-dir="C:/ChromeDevSession"，重启浏览器后即可临时关闭同源策略。
• Firefox：在about:config中设置security.fileuri.strict_origin_policy为false。
  注意：此方法仅适合本地开发测试，绝对不能用于日常浏览，会带来安全风险。

4. 使用CORS浏览器扩展 #

安装类似Allow CORS: Access-Control-Allow-Origin的Chrome/Firefox扩展，开启后可临时绕过CORS限制。同样只适合开发场景，生产环境无效。

你的请求代码参考：

import React, { useEffect, useState } from 'react';
import axios from 'axios';

export default function Dashboard() {
  const [xeRate, setXeRate] = useState(null);
  useEffect(() => {
    const fetchData = async () => {
      try {
        // 根据选择的方案修改请求地址
        const response = await axios.post('https://api.wisecapitals.com/cronjobs/fetchXERate', {
          from: 'USD',
          to: 'LKR'
        }, {
          auth: {
            username: 'ronak',
            password: 'password123test'
          }
        });
        if (response.data && response.data.forward && response.data.forward.LKR) {
          setXeRate(response.data.forward.LKR);
        }
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };
    fetchData();
  }, []);

  // 其余代码保持原样
}

内容的提问来源于stack exchange，提问作者Damika