Ad

Access To XMLHttpRequest At 'localhost' From Origin 'localhost' Has Been Blocked By CORS Policy: Response To Preflight

- 1 answer

I'm getting the following error:

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.

I've tried the solutions, here, but none are working for me - the link to the Chrome plugin seems not to work. I haven't tried disabling CORS in Chrome, as that's not really the solution I'm looking for.

I'm making a GET from React:

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

And my server is a dotnet core MVC app. My controller looks like this:

[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();
}

And I'm adding the CORS headers in Startup.cs:

app.Use((context, next) =>
{
    context.Response.Headers["Access-Control-Allow-Origin"] = config["AllowedHosts"];
    return next.Invoke();
});

Where "AllowedHosts" is *.

Any ideas?

Ad

Answer

Turns out I'd missed calling app.UseCors(); in startup.cs and was setting the wrong API Key from Cognito in the call header.

Ad
source: stackoverflow.com
Ad