React+Axios中Access-Control-Allow-Origin跨域问题求助

嘿，我碰到过好多次这个问题了！你现在踩的坑其实很常见——你在前端设置的Access-Control-Origin完全没用，因为CORS是浏览器的安全机制，它要求服务器必须在响应里返回Access-Control-Allow-Origin这类头，前端自己加请求头根本不顶事，甚至可能触发额外的预检请求失败。

下面给你几个靠谱的解决方案，按优先级排序：

1. 最根本的办法：在服务器端配置CORS #

这是长期解决跨域问题的正确姿势，不同后端框架的配置方式不一样，给你几个常见例子：

如果你用Node.js/Express： #

安装cors中间件，然后在代码里启用：

const express = require('express');
const cors = require('cors');
const app = express();

// 允许所有域名跨域（开发环境可以用，生产环境建议指定具体域名）
app.use(cors());

// 或者指定允许的域名
// app.use(cors({
//   origin: 'http://你的前端域名:端口'
// }));

// 你的路由和业务逻辑
app.listen(7000, () => console.log('Server running on port 7000'));

如果你用Django： #

安装django-cors-headers包，然后在settings.py里配置：

INSTALLED_APPS = [
    # ...其他app
    'corsheaders',
]

MIDDLEWARE = [
    'corsheaders.middleware.CorsMiddleware',  # 要放在CommonMiddleware前面
    'django.middleware.common.CommonMiddleware',
    # ...其他中间件
]

# 允许所有域名（开发环境），生产环境建议用CORS_ALLOWED_ORIGINS指定具体域名
CORS_ALLOW_ALL_ORIGINS = True

如果你用Flask： #

安装flask-cors扩展，然后配置：

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)  # 允许所有跨域请求

# 或者指定域名
# CORS(app, resources={r"/api/*": {"origins": "http://你的前端域名:端口"}})

@app.route('/api/v1/auth/login/')
def login():
    # 你的业务逻辑
    return '登录接口'

if __name__ == '__main__':
    app.run(port=7000)

2. 开发环境临时方案：React代理 #

如果你只是在本地开发时遇到这个问题，可以用React自带的代理功能，让前端请求先转发到后端，避免跨域：

方法一：在package.json里加proxy字段 #

打开React项目的package.json，在根节点添加：

"proxy": "http://192.227.134.91:7000"

然后重启React开发服务器，之后你在Axios里请求的时候，直接写相对路径：

axios.post('/api/v1/auth/login/', { tel: tel })

React会自动把这个请求代理到http://192.227.134.91:7000/api/v1/auth/login/。

方法二：用setupProxy.js（更灵活） #

如果你的代理需求更复杂（比如多个后端地址），可以在src目录下创建setupProxy.js文件：

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

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://192.227.134.91:7000',
      changeOrigin: true,
    })
  );
};

同样重启开发服务器即可，请求路径还是用相对路径。

3. 生产环境方案：反向代理（Nginx） #

如果你的项目已经部署到生产环境，可以用Nginx做反向代理，让前端和后端在同一个域名下：
比如Nginx配置大概是这样的：

server {
    listen 80;
    server_name 你的域名;

    # 前端静态文件
    location / {
        root /path/to/your/react/build;
        try_files $uri $uri/ /index.html;
    }

    # 代理后端API请求
    location /api {
        proxy_pass http://192.227.134.91:7000;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
    }
}

这样用户访问你的域名时，前端请求/api/xxx会被Nginx转发到后端，浏览器看来是同域请求，就不会有CORS问题了。

最后提醒你：赶紧把前端代码里的Access-Control-Origin请求头删掉，这个不仅没用，还可能让浏览器发起额外的OPTIONS预检请求，如果服务器没处理预检的话，会导致请求失败。

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