Question

我已经找到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：“尝试获取资源时出现NetworkError。”

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

我的React Frontend在localhost：3000上运行

The Response Header looks like this

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

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

警告：

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

警告：

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

错误：

TypeError：“尝试获取资源时出现NetworkError。

//这是德语，因此我无法上传屏幕截图，也无法翻译我忘了提起我也将@CrossOrigin放在我的Restcontroller上

Answer 1

由于声望低而无法发表评论，但您是否设置了app.listen（8080）; ？

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

您可能会在浏览器中进行某些更改以引起这种情况吗？尝试使用其他浏览器？

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

Answer 2

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

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

2 个答案: