React 项目中常见的跨域问题及解决方案

在使用 React 进行前端开发时，调用后端接口往往会遇到 跨域问题。这是前端开发中一个非常常见但又容易让初学者困惑的问题。本文将从跨域的基本原理讲起，结合 React 项目的实际开发，讲解如何优雅地解决跨域问题。
一、什么是跨域？
“跨域”是指浏览器出于安全策略（同源策略 Same-Origin Policy）的限制，阻止一个网页去请求另一个“源”的资源。
所谓“源”指的是：协议、域名、端口。
只要其中一个不同，就算是跨域。例如：
- ✅ http://localhost:3000向 http://localhost:3000请求 —— 同源
- ❌ http://localhost:3000向 http://api.example.com请求 —— 跨域
- ❌ http://localhost:3000向 https://localhost:3000请求 —— 跨域（协议不同）
- ❌ http://localhost:3000向 http://localhost:5000请求 —— 跨域（端口不同）
二、React 项目中的跨域场景
React 开发环境通常使用 create-react-app脚手架，该脚手架会在 localhost:3000启动一个开发服务器。
如果你的 API 接口部署在另一个地址，比如：

fetch('http://localhost:5000/api/user')
浏览器就会报类似下面的错误：

Access to fetch at 'http://localhost:5000/api/user' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
这说明前端请求被浏览器拦截了，产生了跨域错误。
三、解决方案：使用本地代理（推荐）
在 React 项目中，我们推荐使用 代理转发（proxy）的方式解决跨域问题。
1. 配置方法
方法一：使用 vite（推荐现代项目）
在 vite.config.js中添加：
export default {
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:5000',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  }
}
请求写法：
fetch('/api/user')  // 实际会代理到 http://localhost:5000/user
方法二：使用 create-react-app
在项目根目录下创建 setupProxy.js文件（适用于 react-scripts）：
npm install http-proxy-middleware --save
// src/setupProxy.js
const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
      pathRewrite: {
        '^/api': ''
      }
    })
  );
};
此时你可以在前端发请求如下：
fetch('/api/user')
代理服务器会将请求自动转发到后端地址 http://localhost:5000/user，浏览器认为是本地访问，从而不会报跨域错误。
四、后端支持 CORS（跨域资源共享）
如果你无法使用代理（比如项目已部署上线），需要让后端支持 CORS。
以 Node.js/Express 为例：
npm install cors
const express = require('express');
const cors = require('cors');
const app = express();
app.use(cors());
app.get('/user', (req, res) => {
  res.json({ name: '张三' });
});
后端添加 Access-Control-Allow-Origin等响应头后，浏览器就能正常接收响应。
五、其他跨域解决方式（了解）
#牛客创作赏金赛##简历中的项目经历要怎么写#