获取标头请求 Javascript：cURL 工作，禁止获取

Question

我想在 React App 中获取请求此链接https://soundcloud.app.goo.gl/u6XXuqp3Q7Q7WXgH8的标题 。在做一个简单的请求时

 request('https://soundcloud.app.goo.gl/u6XXuqp3Q7Q7WXgH8', function (error, response, body) {

    console.error('error:', error); 

    console.log('body:', body);

        });

我得到

Access to fetch at 'https://soundcloud.app.goo.gl/u6XXuqp3Q7Q7WXgH8' from 

origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-

Control-Allow-Origin' header is present on the requested resource. If an 

opaque response serves your needs, set the request's mode to 'no-cors' to 

fetch the resource with CORS disabled.

使用 cors-anywhere 代理时

 request('https://cors-anywhere.herokuapp.com/https://soundcloud.app.goo.gl/u6XXuqp3Q7Q7WXgH8', function (error, response, body) {

    console.error('error:', error); 

    console.log('body:', body);

     });

我得到

request.js:150 GET https://cors-anywhere.herokuapp.com/https://soundcloud.app.goo.gl/u6XXuqp3Q7Q7WXgH8 403 (Forbidden)

但是当我只是卷曲时，我得到了正确的回应

curl -s -o /dev/null -D -  https://soundcloud.app.goo.gl/u6XXuqp3Q7Q7WXgH8 

任何人都可以向我解释这种行为，并告诉我如何克服这个问题吗？

谢谢！

Answer 1

当您尝试直接从浏览器调用 API 并且该 API 不允许任何其他网站获取数据时，通常会出现 CORS 错误。到目前为止，我可以想到这个问题有 2 种解决方法 -您可以从后端代码调用该 API，然后在后端收集从网站接收的数据，然后在客户端传输数据。基本上，您将包装原始 API。您可以使用 NGINX 之类的 Web 服务器，并在指向外部 API 的域上配置特定路径，并在您的项目中配置其他路径。这将有助于在同一域名上制作外部 API 和您的 React 代码。您的主要目标是让该外部 API 与您的反应代码一起通过您的域工作。

Answer 2

在浏览器上下文 JS 中，例如在对 API 的获取调用中，CORS 适用。与 CURL 请求不同，您实际上是在运行服务器端上下文，因此 CORS 不适用。这就是为什么您可以从服务器上下文或 node.js 上下文访问 instagrams 非官方 api，但不能从浏览器中的同一个 fetch 调用访问。可能的解决方案：服务器设置的 Allow-Content-Orgin 标头必须包含您的页面所在的域。将 Eletron 或 NodeWebkit.js 用于使用浏览器 (chromium) 运行客户端的可视化应用程序以在其中启动您的应用程序（浏览器和服务器上下文的混合，CORS 不适用）运行 node.js 应用程序（无浏览器、服务器上下文）并从终端运行您的应用程序。（CORS 不适用）