如何在 fetch 中执行跨域请求以及异步等待？ （CORS 错误）[重复]

Posted 2023-02-22

【中文标题】如何在 fetch 中执行跨域请求以及异步等待？ （CORS 错误）[重复]

【英文标题】：How to perform cross-origin requests in fetch along with async await? (CORS error) [duplicate]

【发布时间】：2021-12-08 08:09:16

【问题描述】：

const runFunction = async () => 

try 
    const getAPI = await fetch(`https://xkcd.com/1/info.0.json`);
    const resp = await getAPI.json();

    console.log(resp);

 catch (error) 
    console.log(error);




runFunction();

我正在尝试使用 fetch 和 async/await 从 API 获取信息，但我收到了 CORS 错误。我尝试添加多个标题，例如：

 const getAPI = await fetch(`https://xkcd.com/1/info.0.json`,
    
        headers:
        
            "Access-Control-Allow-Origin":"*",
            "Access-Control-Allow-Methods": "HEAD, GET, POST, PUT, PATCH, DELETE",
            "Access-Control-Allow-Headers": "Origin, Content-Type, X-Auth-Token"
        
    );

这样做仍然会给我错误“请求的资源上不存在'Access-Control-Allow-Origin'标头”。我能够解决这个问题的唯一方法是在我的浏览器中添加一个 CORS 解锁扩展。我不认为这是处理我的代码的有效方式，因为任何访问我的项目的人都必须下载扩展。

要解决这个问题，我是否必须创建一个节点应用程序？有没有办法在客户端解决这个问题？

【参考方案1】：

Access-Control-Allow-* 标头是响应标头，因此将它们添加到您的请求中不会产生任何影响。 xkcd.com 的所有者必须通过添加这些标头在其服务器上启用 CORS 请求。

如果服务器所有者未启用 CORS，则无法获取客户端。