使用JavaScript的fetch()跨域获取网页HTML源码遇CORS问题如何解决？

首先明确：浏览器端直接用fetch跨域获取第三方网站的HTML源码，受同源策略限制，绝大多数情况下无法直接实现，以下是具体原因和可行解决办法：

为什么你遇到的问题会发生？ #

• 浏览器的同源策略禁止脚本从一个域名请求另一个域名的资源，所以直接fetch目标网站会触发CORS错误。
• 添加{mode: 'no-cors'}后，请求确实会发送，但浏览器会把响应标记为不透明响应（opaque response），脚本无法读取响应的任何内容，自然拿不到HTML。

可行的解决办法 #

1. 搭建后端代理（推荐，通用方案） #

后端服务器不受浏览器同源策略限制，可以由后端去请求目标网站的HTML，再把结果返回给前端。

比如用Node.js + Express实现简单代理：

// 后端代码
const express = require('express');
const axios = require('axios');
const app = express();

// 允许前端跨域访问代理接口
app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*');
  next();
});

app.get('/get-html', async (req, res) => {
  try {
    const targetUrl = req.query.target;
    const html = await axios.get(targetUrl);
    res.send(html.data);
  } catch (err) {
    res.status(500).send('请求目标网站失败');
  }
});

app.listen(3001, () => {
  console.log('代理服务运行在 http://localhost:3001');
});

前端调用代码：

const getData = async () => {
  // 请求自己的后端代理接口，传入目标网站地址
  const res = await fetch('http://localhost:3001/get-html?target=http://example.com');
  const data = await res.text();
  console.log(data); // 此时能正常拿到HTML源码
};
getData();

2. 目标网站开放CORS权限（极少情况） #

如果目标网站的服务器配置了Access-Control-Allow-Origin响应头，允许你的域名访问，那直接用你最初的代码就能成功。但绝大多数公共网站不会开放这种权限，所以这个方案仅适用于你能控制目标网站服务器的场景。

3. 浏览器扩展（仅限个人使用） #

浏览器扩展拥有更高的权限，可以绕过同源策略。如果你只是自己需要获取某个网站的HTML，可以编写一个简单的浏览器扩展，在扩展的背景脚本中发起请求，再把结果传递给页面。但这种方法无法用于面向普通用户的公开网页项目。

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