React中使用fetch/axios调用接口遇CORS问题求助

你遇到的是浏览器同源策略导致的CORS跨域拦截：Postman和直接在浏览器地址栏访问接口时，不会触发浏览器的CORS检查；但React项目运行在http://localhost:5173，和接口域名monedaextranjera.ansolidata.com属于不同源，浏览器会强制检查接口返回的Access-Control-Allow-Origin响应头，接口没配置这个头就会被拦截。

下面是几种可行的解决办法：

1. React项目配置代理（开发环境首选） #

因为你用的是Vite（端口5173是Vite默认端口），直接修改vite.config.js添加代理规则：

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      // 用/api作为接口前缀
      '/api': {
        target: 'http://monedaextranjera.ansolidata.com',
        changeOrigin: true, // 让后端认为请求来自目标域名，避免跨域报错
        rewrite: (path) => path.replace(/^\/api/, '') // 去掉/api前缀，转发到真实接口
      }
    }
  }
})

之后在代码里调用接口时，把原URL换成/api/data/?format=json，比如：

// fetch写法
fetch('/api/data/?format=json')
  .then(res => res.json())
  .then(data => console.log(data))

// axios写法
axios.get('/api/data/?format=json')
  .then(res => console.log(res.data))

2. 让后端配置CORS响应头 #

如果能联系到接口的开发者，让他们在接口的响应头里添加：

• 允许所有域名访问：Access-Control-Allow-Origin: *
• 只允许你的本地开发域名：Access-Control-Allow-Origin: http://localhost:5173
  不同后端语言的配置方式不同，比如Python Flask可以用flask-cors库，Node.js Express可以用cors中间件。

3. 使用no-cors模式（仅能获取不透明响应，不推荐） #

如果只是需要请求成功但不需要读取返回数据，可以给请求加上mode: 'no-cors'，但这种方式下你无法解析返回的JSON：

fetch('http://monedaextranjera.ansolidata.com/data/?format=json', {
  mode: 'no-cors'
})
.then(response => {
  // 这里无法读取response的内容，只能确认请求发送成功
  console.log('请求已发送', response)
})

4. 本地搭建反向代理服务器 #

如果上面的方法都不适用，可以用Node.js搭建一个简单的代理服务器：

1. 安装依赖：npm install express http-proxy-middleware
2. 创建proxy.js文件：

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const app = express();

// 代理规则
app.use('/api', createProxyMiddleware({
  target: 'http://monedaextranjera.ansolidata.com',
  changeOrigin: true,
  pathRewrite: { '^/api': '' }
}));

// 启动代理服务器
app.listen(3000, () => {
  console.log('代理服务器运行在http://localhost:3000');
});

3. 启动代理：node proxy.js
4. React里调用http://localhost:3000/api/data/?format=json即可绕过CORS限制

内容的提问来源于stack exchange，提问作者Carlos Raúl Cárcamo Tejada