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

Question

我已经找到了这个已经帮了我的忙，但是在我的代理中添加了这样的标题之后。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。”

<代码>此。setState（{contacts:data}）应该存储由后端Java程序交付的JSON对象。JSON对象位于localhost:8080/api，只是字符串

我的反应前端运行在localhost:3000

响应标头如下所示

我在哪里需要这个标题以避免出现CORS错误，最好不要使用npm库“CORS”或任何浏览器附加组件。如果我没弄错的话，我还应该用localhost:8080替换'*'，对吗？我的最终目标是将这些字符串动态地放入PrimeReact组件（表）中。

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

警告：

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

警告：

阻止跨源请求：同一源规则禁止读取http://localhost:8080/api.（原因：CORS飞行前通道失败）。

错误：

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

//它是德语的，所以我无法上传屏幕截图，翻译它我忘了提到我把@CrossOrigin放在我的雷斯特控制器上了

Answer 1

经过无数个小时的调试，结果证明我没有放置http。cors（） 编码到我的Web安全配置中。java我在阅读本教程后发现：https://www.baeldung.com/spring-security-cors-preflight

Answer 2

无法评论，因为低代表，但你设置app.listen（8080）；？

此外，如果您在localhost上同时运行CORS，我认为您不需要更改任何与CORS相关的内容。

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

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