React组件用Axios请求todo.js遇XMLHttpRequest跨域加载失败

嘿，我看到你在React组件里用Axios请求跨域资源时踩了坑，先给你指出一个关键误区：你在请求头里设置的Access-Control-Allow-Origin和Access-Control-Allow-Credentials是服务器端需要返回的响应头，不是客户端请求时要带的头——现在加的这些配置完全没用，反而可能干扰请求，先把它们删掉！

接下来给你几个可行的解决方案，按推荐优先级排序：

1. 开发环境用React代理转发（最简单） #

如果你是本地开发（比如用create-react-app初始化的项目），直接在项目根目录的package.json里加一行代理配置：

{
  "name": "your-react-app",
  "proxy": "http://abc.mydomain.org",
  // 其他原有配置...
}

然后修改Axios请求，把完整URL改成相对路径：

axios.get('/data/todo.js')
  .then(response => console.log(response))
  .catch(err => console.error(err));

这样React的开发服务器会自动把请求转发到目标域名，绕过浏览器的跨域限制，非常适合开发阶段快速解决问题。

2. 服务器端配置CORS（生产环境必选） #

生产环境最标准的解决方案是在abc.mydomain.org的服务器上配置CORS响应头，允许你的前端域名（http://localhost:8080）访问。

示例：Node.js/Express服务器 #

用cors中间件快速配置：

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

// 只允许指定域名访问（推荐生产环境）
app.use(cors({
  origin: 'http://localhost:8080',
  credentials: true // 如果需要携带Cookie等凭证的话开启
}));

// 你的路由逻辑...
app.listen(3000);

示例：Nginx服务器 #

在对应location块里添加响应头：

location /data/ {
  add_header Access-Control-Allow-Origin http://localhost:8080;
  add_header Access-Control-Allow-Credentials true;
  add_header Access-Control-Allow-Methods GET,OPTIONS;
  add_header Access-Control-Allow-Headers Content-Type;

  // 处理OPTIONS预检请求
  if ($request_method = OPTIONS) {
    return 204;
  }
}

3. JSONP方案（仅当接口支持时可用） #

因为你请求的是.js文件，如果这个文件是JSONP格式（比如返回callbackFunction({...})），可以用JSONP方式获取数据：

// 动态创建script标签加载资源
function fetchTodoData() {
  const script = document.createElement('script');
  // 假设接口支持callback参数指定回调函数名
  script.src = 'http://abc.mydomain.org/data/todo.js?callback=handleTodoData';
  document.body.appendChild(script);
}

// 定义回调函数
window.handleTodoData = function(todoData) {
  console.log('获取到的待办数据：', todoData);
  // 在这里处理数据，比如更新组件状态
}

// 在组件生命周期里调用
componentWillMount() {
  fetchTodoData();
}

注意：JSONP只支持GET请求，且存在XSS风险，生产环境谨慎使用。

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