React跨域问题：请求资源缺少Access-Control-Allow-Origin头

嘿，这个CORS问题我之前开发时也踩过坑！本质就是浏览器的同源策略在起作用——你的React前端和Node.js后端服务不在同一个源（协议、域名、端口任意一个不一样），浏览器就会拦截跨域请求，抛出那个No 'Access-Control-Allow-Origin' header的错误。给你几个实用的解决办法：

方法1：给Node.js服务器添加CORS中间件（最推荐） #

直接用成熟的cors包来处理，它会自动帮你搞定响应头和预检请求，省心又靠谱。

• 首先安装包：

  npm install cors
  

• 然后在你的server.js里引入并使用：

  const express = require('express');
  const cors = require('cors');
  const request = require('request');
  const cheerio = require('cheerio');
  const app = express();
  
  // 开发环境可以允许所有来源，生产环境一定要换成你的前端实际域名！
  app.use(cors());
  
  // 如果你想严格限制来源（比如React跑在localhost:3000），可以这样配置：
  // app.use(cors({
  //   origin: 'http://localhost:3000'
  // }));
  
  // 你的网页抓取接口
  app.get('/api/scrape', (req, res) => {
    // 这里写你的网页抓取逻辑，比如用request和cheerio获取内容
    request('目标网站URL', (error, response, html) => {
      if (!error && response.statusCode === 200) {
        const $ = cheerio.load(html);
        // 解析数据...
        const scrapedData = { /* 你的抓取结果 */ };
        res.json(scrapedData);
      } else {
        res.status(500).send('抓取失败');
      }
    });
  });
  
  app.listen(5000, () => console.log('服务器运行在端口5000'));
  

方法2：手动设置CORS响应头（不用第三方包） #

如果不想额外装包，也可以在接口里手动添加响应头：

app.get('/api/scrape', (req, res) => {
  // 先设置CORS头
  res.setHeader('Access-Control-Allow-Origin', '*'); // 生产环境替换为具体域名
  res.setHeader('Access-Control-Allow-Methods', 'GET, OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');

  // 然后执行抓取逻辑
  request('目标网站URL', (error, response, html) => {
    // 解析并返回数据...
    res.json(scrapedData);
  });
});

⚠️ 注意：如果你的请求是复杂请求（比如带自定义头、POST请求），还要单独处理OPTIONS预检请求，用cors包会自动帮你处理这个场景，所以还是更推荐方法1。

方法3：React开发环境用代理（仅开发阶段） #

如果你是用create-react-app创建的React项目，可以直接在package.json里配置代理，让前端请求自动转发到后端，绕开CORS限制：

在package.json里添加一行：

{
  "name": "your-react-app",
  "version": "0.1.0",
  "proxy": "http://localhost:5000", // 你的Node.js服务器地址
  // ...其他配置
}

然后前端的axios请求就可以简化成：

axios.get('/api/scrape')
  .then(res => console.log(res.data))
  .catch(err => console.error(err));

这样create-react-app会在开发时自动把请求代理到你的后端，浏览器就认为是同源请求了。

最后提醒 #

生产环境绝对不要用*允许所有来源，一定要指定你的前端实际域名（比如https://your-frontend.com），避免安全风险。

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