CORS 策略已阻止从源“localhost”访问“localhost”处的 XMLHttpRequest：对预检的响应 [关闭]

Posted 2023-03-04

【中文标题】CORS 策略已阻止从源“localhost”访问“localhost”处的 XMLHttpRequest：对预检的响应 [关闭]

【英文标题】：Access to XMLHttpRequest at 'localhost' from origin 'localhost' has been blocked by CORS policy: Response to preflight [closed]

【发布时间】：2020-06-24 06:25:43

【问题描述】：

我收到以下错误：

Access to XMLHttpRequest at 'https://localhost:44355/Brand' from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

我已经尝试了解决方案 here，但没有一个对我有用 - Chrome 插件的链接似乎不起作用。我没有尝试在 Chrome 中禁用 CORS，因为这并不是我真正想要的解决方案。

我正在从 React 生成一个 GET：

axios
.get<BrandResponse>(url, 
  'headers':  'Authorization': 'Bearer ' + me.props.session.credentials.accessToken  )
        .then((response: AxiosResponse<BrandResponse>) ...

我的服务器是一个 dotnet core MVC 应用程序。我的控制器如下所示：

[Authorize]
[ApiController]
[Route("[controller]")]
public class BrandController : BaseController

    ...

    [HttpGet]
    [ProducesResponseType(StatusCodes.Status202Accepted, Type = typeof(BrandResponse))]
    public async Task<ActionResult> SearchLcationsAsync([FromQuery] QueryBrand query)
        => (await QueryAsync(query)).ToActionResult();

我正在 Startup.cs 中添加 CORS 标头：

app.Use((context, next) =>

    context.Response.Headers["Access-Control-Allow-Origin"] = config["AllowedHosts"];
    return next.Invoke();
);

其中"AllowedHosts" 是*。

有什么想法吗？

【问题讨论】：

您是否尝试过邮递员来检查您的 URL 是否适用于接听电话？

问题是由于ports 中的更改。您正在尝试从端口3000 访问端口44355。对于开发，如果您正在运行 windows，请运行此命令 chrome.exe --disable-site-isolation-trials --disable-web-security --user-data-dir="D:\temp" 或对于 linux nohup google-chrome --disable-web-security --user-data-dir='/tmp' & 对于生产，您需要设置标题以访问不同的端口。

【参考方案1】：

您设置什么Access-Control-Allow-Origin 标头并不重要（在此阶段）。阅读错误信息：

它没有 HTTP ok 状态。

您可能正在使用 401 Unauthorized 响应来响应预检 OPTIONS 请求。这是一个问题，因为预检请求的目的是请求允许使用其中的凭据发出 GET 请求。

您需要从服务器上的身份验证规则中排除 OPTIONS 请求。

【参考方案2】：

原来我错过了在 startup.cs 中调用 app.UseCors(); 并且在调用标头中从 Cognito 设置了错误的 API 密钥。