为什么在 React 中“被 CORS 策略阻止”，而不是在 Node 中？

Question

在 React 中运行完全相同的脚本会被 Cors 策略阻止，但当我使用 node 运行它时不会。

1. 为什么可以用 node 做，但不能用 React？
2. 我怎样才能在 React 应用程序中获取它？
3. this chrome extension也允许，是不是因为脚本是在访问youtube时执行的，所以域是youtube？

async function isThisAllowed() {
    const videoURL = `https://www.youtube.com/watch?v=QnQe0xW_JY4`
    const data = await axios.get(videoURL);
    console.log(data);
}

Answer 1

CORS 是网站（在本例中为 YouTube）防止其他域访问它们的一种方式。基本上，在这种情况下，在其他域上运行的脚本将无法访问youtube.com。

CORS 仅由浏览器强制执行，因此您的 Node 脚本将按预期工作而您的 React 应用程序不会按预期工作是有道理的。

Here's 很好地解释了 CORS 的工作原理。

你可以用一个简单的节点代理来解决这个问题：

import express from "express";
import axios from "axios";

const app = express();

app.get("/proxy", async (req, res) => {
  const resp = await axios.get(req.query.url);

  res.send(resp.data);
});

app.listen(process.env.PORT || 3000);