.NET Core API with CORS from javascript

Question

I have my API hosted on a different url than the web applications that will access it. I currently have CORS configured to allow everything in my API's Startup:

ConfigureServices:

        services.AddCors(options => {
            options.AddPolicy("CorsPolicy",
                builder => builder.AllowAnyOrigin()
                .AllowAnyMethod()
                .AllowAnyHeader()
                .AllowCredentials());
        });

Configure:

app.UseCors("CorsPolicy");
app.UseMvc();

If I type the API URL into the browser it returns the request fine and get my data back as expected.

But when I attempt to make that API call with javascript as follows:

var xhr = new XMLHttpRequest();    
xhr.open('GET', 'https://api.example.com/Controller');
xhr.onload = function () {
    if (xhr.status === 200) {
        alert('Response is ' + xhr.responseText);
        console.log('Response is ' + xhr.responseText);
    }
    else {
        alert('Request failed.  Returned status of ' + xhr.status);
        console.log('Request failed.  Returned status of ' + xhr.status);
    }
};
xhr.send();

It fails and I get the following error message in my console:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the 
remote resource at https://api.example.com/Controller. (Reason: CORS header 
‘Access-Control-Allow-Origin’ missing).[Learn More]

What am I missing here, what needs to be tweaked to make this work?

follow this https://stackoverflow.com/questions/46785318/the-cors-header-access-control-allow-origin-is-missing — Nisfan, Oct 10 '18 at 18:15

score 1 · Answer 1 · answered Oct 10 '18 at 22:01

1

This turned out to be a bug in my API, the method I was calling was throwing a 500. I still don't understand why the Firefox console was reporting this as a CORS issue but that seems to be the case. Once I fixed the bug the message vanished

answered Oct 10 '18 at 22:01

snappymcsnap

2,050
2
29
53

Servers by default typically don’t add the Access-Control-Allow-Origin response header or other custom headers to 5xx responses. And it’s possible a 5xx error can occur before the server ever gets around to executing your application code. So on the client side, the browser sees a (500) response from the server that lacks the Access-Control-Allow-Origin response header. So the browser logs a message in the console just the same way it does any other time some frontend JavaScript code tries to read a header from a response that lacks the Access-Control-Allow-Origin header. – sideshowbarker Oct 10 '18 at 22:53

score 0 · Answer 2 · answered Oct 10 '18 at 18:26

In ConfigureServices method Start MVC after Service.AddCors()
In Configure method call app.UseMVC() after app.UseCors()

Sequence is very important here. Here is Full Start.cs Should look like :--

    public void ConfigureServices(IServiceCollection services)
    {

        services.AddCors(options =>
        {
            options.AddPolicy("CorsPolicy",
                builder => builder.AllowAnyOrigin()
                .AllowAnyMethod()
                .AllowAnyHeader()
                //.AllowCredentials()
                )
                ;
        });

        services.AddMvc();
       // EnableCorsAttribute

    }

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {

        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }

        app.UseCors("CorsPolicy");
        app.UseMvc();
        //app.UseCors("CorsPolicy");

    }

Hope it Helps you

That's exactly what I have, I updated my question to include the code in Configure(). As I said the issue isn't that it fails, if you put the url in a briowser it works fine, it's that the call from JS produces this error — snappymcsnap, Oct 10 '18 at 18:43

.NET Core API with CORS from javascript

2 Answers2