如何在 fetch() 中使用 no-cors

Posted 2023-03-03

【中文标题】如何在 fetch() 中使用 no-cors

【英文标题】：How use no-cors with fetch()

【发布时间】：2021-03-20 06:05:02

【问题描述】：

我有问题。我试着解释一下。

我的客户要求我使用基本身份验证构建一个用于在私人服务器上获取和修改数据的门户网站。

私人服务器返回一个 XML 文件。

我尝试使用 fetch() 获取数据，但出现 CORS 错误。我知道那是什么意思，但我无法使用私人服务器。

所以我想使用我的 fetch() ：

mode : 'no-cors'

但如果我这样使用，我可以使用获取的数据。

我认为我有两个主要解决方案：

为您正在使用的 API 添加 CORS 支持。这仅在您可以控制目标时才有效。 不是从您的域发出请求，而是需要其他东西为您发出请求。

如果我无法添加 CORS 标头，我可能想要构建一个小型服务器端脚本，它可以代表我发出这些请求。

我的脚本现在可以调用我的脚本，而不是直接调用目标，它必须在服务器端为您执行请求。

但是，如果我没有在服务器上的手，我该怎么做呢？

如果有人有想法...

非常感谢...

---- 编辑 -----

我的代码：

getListApps: async function () 

            let url = `$SA_BASE_URL/applications`;

            // Set headers
            let headers = new Headers();
            headers.append('Authorization', 'Basic ' + btoa(SA_LOGIN + ":" + SA_PASSWORD));
            try 
                // GET request
                const response = await fetch(url,  
                    method: 'GET', 
                    headers: headers, 
                    mode: 'no-cors', 
                    credentials: 'include' )

                if (response.status === 200) 
                    const data = await response.json();
                    this.listApp = data;
                    this.listApp.forEach(app => 
                        if (app.status === "DISCONNECTED") 
                            this.listDecApp.push(app);
                        
                    );
                    this.nbr = this.listDecApp.length;
                 else 
                    if (response.status === 400) this.errors = ['Invalid app_permissions value. (err.400)'];
                    if (response.status === 401) this.errors = ['Acces denied. (err.401)'];
                
             catch (error) 
                console.log(error);
                this.errors = ["Une erreur est survenue lors de la récupération des informations sur le serveur."]
            
            
        ,

【问题讨论】：

见下面我的回答。如果 no-cors 显示不透明的响应，则 cors 应该可以工作。

【参考方案1】：

如果可以使用 no-cors，请将其设置在 headers 中，例如：

var opts = 
  headers: 
    'mode':'cors'
  

fetch(url, opts)

如果您不控制 API，则无能为力。

【讨论】：

谢谢，但我已经这样做了。不幸的是，如果我使用 no-cors 模式，我似乎无法使用响应的内容。我想用它...

@JoLeBelge 你能发布一个你已经在做什么的代码示例吗？

@JoLeBelge 也可以尝试在终端上运行curl <api link> 看看是否收到有效响应？

我更新了我的帖子。而且我不能使用 curl，因为我没有访问私有服务器的权限。

@JoLeBelge 如果您无权访问，则无法获取此 api。