React调用Django API报No 'Access-Control-Allow-Origin' CORS跨域错误求助

这个问题是前后端分离项目的典型跨域拦截问题，源http://localhost:3000和目标服务http://127.0.0.1:8000域名/端口不一致，浏览器默认会按照CORS策略拦截响应，可按需选择以下方案解决：

后端配置CORS（最推荐，生产/开发都适用） #

直接在8000端口的后端服务添加跨域响应头，不同常用后端框架配置方式如下：

• Node.js（Express框架）：先安装cors依赖包，再在服务启动代码中添加配置：

const cors = require('cors')
// 仅允许localhost:3000访问，安全性更高
app.use(cors({
  origin: 'http://localhost:3000'
}))
// 测试阶段临时允许所有来源访问可以直接写 app.use(cors())

• Python（Django框架）：安装django-cors-headers依赖包，在settings.py中修改配置：

INSTALLED_APPS = [
    ...
    'corsheaders',
    ...
]
MIDDLEWARE = [
    # 注意要放在CommonMiddleware前面
    'corsheaders.middleware.CorsMiddleware',
    'django.middleware.common.CommonMiddleware',
    ...
]
CORS_ALLOWED_ORIGINS = [
    "http://localhost:3000"
]

• Python（Flask框架）：安装flask-cors依赖包，在启动代码中添加配置：

from flask_cors import CORS
app = Flask(__name__)
CORS(app, origins="http://localhost:3000")

• Java（SpringBoot框架）：直接在对应的Controller类上加注解即可，或者做全局配置：

// 加在Controller类上
@CrossOrigin(origins = "http://localhost:3000")
@RestController
public class ListController {
  // 接口逻辑
}

前端临时方案（仅开发阶段使用，不要上生产） #

如果暂时没法修改后端代码，可以用前端开发服务的代理功能绕过跨域：

• Vue框架：在vue.config.js中添加代理配置：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:8000',
        changeOrigin: true,
        pathRewrite: { '^/api': '' }
      }
    }
  }
}

配置后前端请求地址改为/api/list/single/2，开发服务器会自动转发到8000端口。

• React框架（create-react-app创建的项目）：直接在package.json中加一行配置：

"proxy": "http://127.0.0.1:8000"

配置后前端请求直接写/list/single/2即可自动转发。

注意事项 #

• 后端配置完成后必须重启服务才能生效
• 生产环境不要配置允许所有来源*，必须限制为你自己的正式前端域名，避免安全风险

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