Question

我有一个用React js制作的前端和一个用net core 2.0制作的后端。两者都在localhost上运行（分别为localhost：3000和5001）。我要做的就是让前端获取一些数据：

fetch('https://localhost:5001/api/Login/' + this.state.username + '/' + this.state.password + '/')
    .then( results => {
        return results.json();
    })
    .then( data => {
        this.setState({
            jobTitle : data.jobTitle,
        });
    });

此方法由一个按钮调用，因此，每当我单击此按钮时，控制台中都会出现错误。

跨域请求被阻止：“同源起源”策略禁止读取https://localhost:5001/api/Login/matteo/baldini/处的远程资源。（原因：CORS请求未成功。）

这是在运行Windows 7的计算机上的Firefox中发生的。

有趣的是，如果我在运行Mint的笔记本电脑上运行相同的代码，则效果很好。

API是通过运行dotnet new webapi制成的，而我几乎没有做任何更改。

我还尝试实现了其他问题和文章中找到的许多解决方案，以及在Firefox上使用Cors的所有内容，但没有任何效果。我目前不知道该怎么办，因此非常感谢您的帮助。

谢谢大家

Answer 1

之所以会发生这种情况，是因为大多数浏览器都将localhost:3000和localhost:5001假定为不同的主机，因此API响应中需要使用CORS标头以使通信成为可能。

如果在生产环境中使用相同的主机名托管，则可能不是这种情况，但是对于测试环境，您可以添加

response.setHeader('Access-Control-Allow-Origin', '*');

在您的API处理程序中，以允许从所有来源访问您的API。

React js和.NET WebAPI的CORS问题

1 个答案: