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

Question

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

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() 中我还添加了 header 以确保它有效：

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

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

我仍然收到错误：TypeError: "NetworkError when attempting to fetch resource."

this.setState({ contacts: data }) 应该存储由我的后端 Java 程序交付的 JSON Objects。 JSON Objects 位于 localhost:8080/api 并且只是字符串

我的 React 前端运行在 localhost:3000

The Response Header looks like this

我在哪里需要这个 header 才能避免出现 CORS 错误，我更愿意在没有 npm 库 "cors" 或任何浏览器 add-on 的情况下工作。我也应该把'*'替换成localhost:8080如果我没记错的话，对吧？我的最终目标是动态地将这些字符串放入 PrimeReact 组件 (A Table) 中。

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

警告：

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

警告：

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

错误：

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

//因为是德文所以没法上传截图，翻译一下我忘了说我也把 @CrossOrigin 放在了我的 Restcontroller 上

Answer 1

无法评论，因为rep低，但是你设置了吗app.listen(8080); ？

此外，如果您运行都在本地主机，我认为您不需要更改与 CORS 相关的任何内容。

您的浏览器是否有可能导致此问题的更改？试试不同的浏览器？

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

Answer 2

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

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

React JS: CORS Error causing NetworkError when attempting to fetch resource

proxy

spring

response

cors

reactjs