2

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

I have a web api and corresponding web application with user accounts. When I attempted to login I was met with an error which said No Access-Control-Allow-Origin header is present. I found a guide that walked me through how to setup CORS. This is the guide I used.

https://social.technet.microsoft.com/wiki/contents/articles/33771.fix-to-no-access-control-allow-origin-header-is-present-or-working-with-cross-origin-request-in-asp-net-web-api.aspx

In my WebApiConfig file I have this code

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

        var cors = new EnableCorsAttribute("*", "*", "*");
        config.EnableCors(cors);
    }

In my AccountController file I added in the EnableCors at the top.

[EnableCors(origins: "*", headers: "*", methods: "*")]
[Authorize]
[RoutePrefix("api/Account")]

Finally, in my Web.config file I added the following:

<httpProtocol>
  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="*" />
    <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>

This fixed my login issue however, none of my GETS are working. Here is an example of a GET function:

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

The GET is throwing an error which says "Multiple Access-Control-Allow-Origin headers are not allowed for CORS response". I don't see where I have multiple Access-Control-Allow-Origin headers anywhere. Where should I be looking?

Update 1

Found something interesting. I used Fiddler to watch everything going on in the background and on the GET function that causes the error I'm seeing this in the headers:

enter image description here

So the "Access-Control-Allow-Origin: *" is definitely showing twice but the question is why. I searched all of my code and I only have that declared once. If I remove that line, it breaks the login page so I have to leave it in.

1

1 Answer 1

2

I think I figured this out. I went into the WebApiConfig file and changed the part about CORS to this:

//var cors = new EnableCorsAttribute("*", "*", "*");
//config.EnableCors(cors);
config.EnableCors();

Then I removed the EnableCors part from my Controller and it sort of started working again. I'm still getting an error on the GET call but I went from two errors to just one so it's progress I guess.

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

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.