小项目生产中如何解决CORS问题？

Question

我正在使用

zenquotes

API 为自己创建一个生产力工具作为初学者项目。这是一个生产力工具，需要每天在屏幕顶部显示报价。

问题： 1）在我的本地系统中开发并运行它时，未获取JSON数据。 2) 在控制台中，显示 CORS 问题。

这是代码

async function getQuote()
{
    try {
        const quote_file=await fetch(`https://zenquotes.io/api/today`);
        const quote = await quote_file.json();
        console.log(quote);
    } 
    catch(err)
    {
        getQuote();
    }
}
getQuote();

我已经尝试过： 1) 使用 Live Server Extension 在浏览器中运行程序。 2）在netlify中部署这个网站但没有成功。 3) 使用

https://cors-anywhere.herokuapp.com/

作为获取链接的前缀，但也是徒劳的

Answer 1

只是一些简短的评论。这里的问题不在于您如何调用 API，而在于该 API 如何处理 CORS。

如果您查看响应中的标题，它看起来像......

HTTP/1.1 200 OK
Date: Mon, 16 Sep 2024 17:59:08 GMT
Server: Apache
X-Content-Type-Options: nosniff
X-Frame-Options: sameorigin
Content-Security-Policy: frame-ancestors 'self';
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: application/json; charset=utf-8

这里我们缺少

access-control-allow-origin

标头，因此 Chrome 强制执行同源策略。

相反，如果您查看另一个 API，如 https://picsum.photos，它工作得很好，因为他们通过将此标头和值设置为

access-control-allow-origin: *

来处理 CORS，以允许来自任何来源的请求（即

*

).

这通常意味着 API 应该被称为服务器端，您可以在服务器端控制 CORS，就像使用

cors

Express 中间件。

或者，如果您只是尝试在浏览器中运行它，您可以使用 Chrome 扩展来禁用 CORS，例如 this 暂时禁用 CORS，问题就会消失。请注意不要为每个站点启用此功能。