使用JavaScript fetch请求谷歌遭CORS拦截，自定义Header无效求解决

首先，你之前的fetch配置犯了两个关键错误：

• mode 是fetch配置的顶级属性，不能放在headers对象里；
• Access-Control-Allow-Origin是服务器返回的响应头，客户端设置这个头完全无效，浏览器根本不会理会。

先纠正基础配置 #

如果只是想绕过CORS获取资源（但无法读取响应内容，只能拿到一个"opaque"的空响应），可以把mode设为no-cors，正确写法是：

async function fetchData() {
  const res = await fetch("https://www.google.com", {
    mode: "no-cors" // 顶级配置，不在headers里
  });
  console.log(res); // 这里只能看到基本状态，无法获取响应体
}
fetchData();

为什么curl能正常请求？ #

CORS是浏览器专属的安全机制，curl这类非浏览器的HTTP客户端不受这个限制，所以直接请求没问题。但浏览器会强制检查跨域请求的响应头，谷歌的服务器不会给未知域名返回Access-Control-Allow-Origin头，所以浏览器拦截了响应。

真正可行的解决思路 #

1. 搭建后端代理（推荐生产环境用）

自己写一个简单的后端服务，前端请求这个后端，由后端去调用谷歌的接口，后端请求不受CORS限制。比如用Node.js+Express的示例：

// 后端代码（Node.js）
const express = require('express');
const fetch = require('node-fetch');
const app = express();

app.get('/proxy-google', async (req, res) => {
  const googleRes = await fetch('https://www.google.com');
  const html = await googleRes.text();
  res.send(html);
});

app.listen(3000, () => console.log('代理服务运行在3000端口'));

然后前端请求自己的代理：

async function fetchData() {
  const res = await fetch("http://localhost:3000/proxy-google");
  const html = await res.text();
  console.log(html);
}
fetchData();

2. 使用浏览器CORS扩展（仅开发测试用）

安装类似"Allow CORS: Access-Control-Allow-Origin"的浏览器扩展，临时关闭浏览器的CORS检查。但注意这只是开发调试用，不能让用户在生产环境这么做。

3. 改用官方API（如果适用）

如果你是要实现搜索等功能，谷歌提供了官方的API（比如Custom Search API），这些API会配置正确的CORS头，允许前端直接请求，比直接爬取网页更合规稳定。

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