React JS：尝试获取资源时导致 NetworkError 的 CORS 错误

Posted 2023-03-04

【中文标题】React JS：尝试获取资源时导致 NetworkError 的 CORS 错误

【英文标题】：React JS: CORS Error causing NetworkError when attempting to fetch resource

【发布时间】：2020-05-21 04:01:49

【问题描述】：

我已经找到了 this 这已经帮助了我，但是在我的 proxy.js 中添加了这样的标题之后：

const proxy = require('http-proxy-middleware');

module.exports = function(app) 
    app.use(function(req, res, next) 
//adding headers to allow CORS
        res.header("Access-Control-Allow-Origin", "*");
        res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
        next();

    );
    app.use(proxy('/api',  target: 'http://localhost:8080' ));

在 fetch() 中，我还添加了标题以确保它正常工作：

fetch('http://localhost:8080/api',
            headers:
                'Access-Control-Allow-Origin':'*'
            ,

        )
            .then(res => res.json())
            .then((data) => 
                this.setState( contacts: data )
            )
            .catch(console.log)
    

我仍然收到错误：TypeError：“尝试获取资源时出现网络错误。”

this.setState( contacts: data ) 应该存储由我的后端 Java 程序提供的 JSON 对象。 JSON 对象位于 localhost:8080/api 并且只是字符串

我的 React 前端在 localhost:3000 上运行

The Response Header looks like this

为了不出现 CORS 错误，我在哪里需要此标头，最好我希望在没有 npm 库“cors”或任何浏览器插件的情况下工作。我也应该用 localhost:8080 替换 '*' 如果我没记错的话，对吧？ 我的最终目标是将这些字符串动态地放入 PrimeReact 组件（A 表）中。

编辑：sideshowbarker 请求的完整错误消息：

警告：

跨域请求被阻止：同源规则禁止读取http://localhost:8080/api处的外部资源。 （原因：CORS 预检通道不成功）。

警告：

跨域请求被阻止：同源规则禁止读取http://localhost:8080/api处的外部资源。 （原因：CORS 预检通道失败）。

错误：

TypeError：“尝试获取资源时出现网络错误。

//是德文所以无法上传截图，翻译一下 我忘了提到我也把@CrossOrigin 放在我的 Restcontroller 上

【问题讨论】：

浏览器在 devtools 控制台中记录的完整错误消息是什么？

【参考方案1】：

因为rep低不能评论，但是你设置了app.listen(8080); ?

如果你同时在本地主机上运行，​​我认为你不需要更改与 CORS 相关的任何内容。

您的浏览器中是否有可能导致此问题的更改？换个浏览器试试？

我还建议使用 axios，将其定义为前后 GET，确保当您在浏览器上转到 http://localhost:8080/api 时，您会在屏幕上看到 JSON。

【讨论】：

我在app.use(function(req, res, next) 之前添加了一个app.listen 但什么也没发生并且localhost 显示一个JSON

【参考方案2】：

经过无数小时的调试，我发现我没有在我的 WebSecurityConfig.java 中添加 http.cors(); 我在阅读本教程后发现了这一点： https://www.baeldung.com/spring-security-cors-preflight