具有对 API 的提取的 reactJS 应用程序无法加载，请求的资源上不存在“Access-Control-Allow-Origin”标头

Posted 2023-03-04

【中文标题】具有对 API 的提取的 reactJS 应用程序无法加载，请求的资源上不存在“Access-Control-Allow-Origin”标头

【英文标题】：reactJS app with a fetch to an API fails to load with No 'Access-Control-Allow-Origin' header is present on the requested resource

【发布时间】：2019-01-22 16:21:27

【问题描述】：

我有以下 6 天前有效的代码：

            function showProduct(barcode) 

            let url = "https://api.barcodelookup.com/v2/products?barcode=" + barcode + "&key=mj1pm32ylcctxj1byaiaxxxxxxxxxx";
            const options =  method: 'GET' ;                
            fetch(url, options)
            .then(function(response) 
                return response.json();
            )
            .then(function(myJson) 
                setTimeout(function() 
                if (myJson == undefined) 
                
                    console.log("fetch failed")
                 
                else 
                
                    //inspect the data that the WebAPI returned
                    console.log("myJson: ", myJson);
                    console.log(myJson.products[0].barcode_formats);                        
                    Quagga.stop();   
                
                , 3000);
            );
        

传递给函数的值是 5000159459228。上周执行此代码时，我收到了来自 API 的响应，并且能够获取返回的各个字段。

今天，我开始调试我的应用程序的不同功能，现在在执行上面列出的代码时收到此错误：

无法加载https://api.barcodelookup.com/v2/products?barcode=5000159459228&key=mj1pm32ylcctxj1byaiaxxxxxxxxxx：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'http://localhost:8080' 不允许访问。如果不透明的响应满足您的需求，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

随后出现此错误：

Uncaught (in promise) TypeError: Failed to fetch

然后是这个：

newscan:91 跨域读取阻塞 (CORB) 阻止了 MIME 类型 application/json 的跨域响应 https://api.barcodelookup.com/v2/products?barcode=5000159459228&key=mj1pm32ylcctxj1byaiaxxxxxxxxxx。详情请见https://www.chromestatus.com/feature/5629709824032768。

如果我手动将我构建到 url 变量中的字符串粘贴到浏览器中，我会得到一个有效的响应。

有什么建议吗？

【参考方案1】：

乔纳森你有一个cors 的问题。如果您在后端使用 express，一个快速的解决方法是添加带有 npm i --save cors 的 CORS 模块，然后将其用作中间件：

const cors = require('cors');
app.use(cors());

您始终可以自己添加标题。深入了解Enable CORS.org

您的问题也在这里得到解答：[No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API

【讨论】：

我将网址从api.barcodelookup.com/v2/… 更改为cors-anywhere.herokuapp.com/http://api.barcodelookup.com/v2/…。我仍然收到此错误“无法加载api.barcodelookup.com/v2/…：请求的资源上不存在'Access-Control-Allow-Origin'标头。因此不允许访问源'localhost:8080'。”

不要问我为什么，但它现在正在工作。很奇怪。感谢您的帮助。