MVC Web API Error Code SCRIPT7002

Question

For reference I'm using Windows 10 and Visual Studio 2017.

I have an MVC web api and corresponding web application complete with login capabilities. I'm simply attempting to debug using IE. Whenever I use a GET call I'm met with the following error: SCRIPT7002: XMLHttpRequest: Network Error 0x80070005, Access is denied. I have CORS configured and enabled so I'm at a complete loss as to why this isn't working.

In my WebApiConfig file I have this:

public static void Register(HttpConfiguration config)
    {
        // Web API configuration and services
        // Configure Web API to use only bearer token authentication.
        config.SuppressDefaultHostAuthentication();
        config.Filters.Add(new HostAuthenticationFilter(OAuthDefaults.AuthenticationType));

        // Web API routes
        config.MapHttpAttributeRoutes();

        config.Routes.MapHttpRoute(
            name: "DefaultApi",
            routeTemplate: "api/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );

        config.EnableCors();
    }

And then in the Web.config file I have this:

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="http://localhost:53942" />
    <add name="Access-Control-Allow-Headers" value="Content-Type" />
    <add name="Access-Control-Allow-Methods" value="GET,POST,PUT,DELETE,OPTIONS" />
    <add name="Access-Control-Allow-Credentials" value="true" />
  </customHeaders>
</httpProtocol>

The call itself is being made using this code:

var returnValue = [];
    console.log(localStorage.getItem('accessToken'));
    jQuery.support.cors = true;
    if (window.XMLHttpRequest) {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET", 'http://localhost:60690/api/ProfilePicture?Username=' + username, false);
        xmlhttp.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
        xmlhttp.setRequestHeader('Authorization', 'Bearer ' + localStorage.getItem('accessToken'));
        xmlhttp.send();
        if (xmlhttp.status == 200) {
            returnValue = jQuery.parseJSON(xmlhttp.responseText);
        }
    }
    return returnValue;

Again, I'm just trying to debug. When the projects are deployed they're going to be on the same domain so CORS is irrelevant. What am I missing?

You could try to replace <add name="Access-Control-Allow-Origin" value="http://localhost:53942" /> by <add name="Access-Control-Allow-Origin" value="*" /> — james
– james, Commented Feb 12, 2018 at 16:40
@JimmyFL I had that originally but apparently you cannot have <add name="Access-Control-Allow-Origin" value="*" /> and <add name="Access-Control-Allow-Credentials" value="true" /> as they conflict with one another. — Rhendar
– Rhendar, Commented Feb 12, 2018 at 16:43
The API is on localhost:60690 and the UI is on localhost:53942 — Rhendar
– Rhendar, Commented Feb 12, 2018 at 18:23
Ordinarily you would configure CORS in code, not through the custom headers collection. Also make sure you remove the HTTP handler that removes OPTIONS requests. Search your API config file for OPTIONSVerbHandler — user47589
– user47589, Commented Feb 12, 2018 at 18:25

Rhendar · Accepted Answer · 2018-02-12 21:20:22Z

1

Alright, I finally figured this out. Here's what I did:

In the Web.config file remove the CustomHeader part. Get rid of it all.
Found this other StackOverflow question: CORS on OWIN and accessing /token causes 'Access-Control-Allow-Origin' error. Ironically the answer with the most downvotes was the one that helped me the most. I added in the following line into the GrantResourceOwnerCredentials class:

context.Response.Headers.Add("Access-Control-Allow-Origin", new[] { "*" });
Go into each controller and add the following line at the top:

[EnableCors(origins: "http://localhost:53942", headers: "", methods: "", SupportsCredentials = true)]

Once I did this it started working.

answered Feb 12, 2018 at 21:20

Rhendar

4501 gold badge11 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

MVC Web API Error Code SCRIPT7002

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related