React应用爬取谷歌搜索结果遇CORS及User-Agent问题求助

Node.js 与浏览器请求的差异 #

Node.js 作为服务端环境发起请求时，不受浏览器的同源策略（CORS）限制。而 React 运行在浏览器中，浏览器会严格执行 CORS 规则——只有当目标服务器返回的响应头包含 Access-Control-Allow-Origin 且值匹配当前页面的域名时，请求才会被允许。谷歌的搜索接口并未将 localhost 或 localho.st 这类域名加入允许列表，所以浏览器会直接拦截请求。

User-Agent 头的限制 #

浏览器出于安全考虑，禁止通过前端 JavaScript（包括 axios）修改 User-Agent 这类「不安全请求头」，这就是你看到 "Refused to set unsafe header 'User-Agent'" 错误的原因。即便你能绕过这个限制，也无法解决 CORS 问题——因为谷歌的 CORS 策略和请求头无关，只看请求的来源域名。

谷歌的域名限制 #

是的，谷歌确实会通过 CORS 策略限制非信任域名的请求。其公开搜索接口仅允许来自谷歌自有域名或特定合作方域名的跨域请求，普通开发者的本地域名（如 localhost）不在允许范围内。

最可靠的方案是搭建一个代理服务器：让 React 先把请求发送到你自己的 Node.js 后端，再由后端转发请求到谷歌搜索接口，最后将结果返回给 React。

步骤1：搭建 Node.js 代理服务器 #

使用 Express 和 axios 快速实现：

const express = require('express');
const axios = require('axios');
const app = express();
const port = 3001;

app.get('/api/google-search', async (req, res) => {
  try {
    const query = req.query.q;
    const response = await axios.get(`https://www.google.com/search?q=${query}`, {
      headers: {
        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36'
      }
    });
    res.send(response.data);
  } catch (error) {
    res.status(500).send(error.message);
  }
});

app.listen(port, () => {
  console.log(`Proxy server running on port ${port}`);
});

步骤2：修改 React 代码调用代理 #

将原来直接请求谷歌的代码，改为请求你的代理服务器：

import axios from 'axios';

async function searchGoogle(query) {
  try {
    const response = await axios.get(`http://localhost:3001/api/google-search?q=${encodeURIComponent(query)}`);
    console.log(response.data);
    // 处理搜索结果
  } catch (error) {
    console.error(error);
  }
}

1. 谷歌是否因域名限制导致 CORS 问题？
   是的，谷歌的搜索接口仅允许信任域名发起跨域请求，本地开发域名不在允许列表中，因此浏览器会拦截请求。

2. 设置 User-Agent 是否能解决问题？
   不能。首先浏览器不允许前端修改该请求头；其次，CORS 限制的是请求来源域名，和 User-Agent 无关，即便能设置也无法绕过 CORS。

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