Unable to load Angular templates cross-domain with custom headers in requests

Question

we have a project for a client that consists of 3 different websites, and we wanted to re-use as much code as possible. We have one project that contains the bulk of the core Angular JavaScript / templates for directives etc.

We are using ASP.NET 4 and Angular 1.5.5.

I am able to render out a template that's held in Project 1 from Project 2 using the absolute URL with CORS enabled.

However, we are also using a request interceptor for authentication for Single-Sign-On between applications, using the request headers. This stops the cross-domain templates from being pulled over into Project 2 with the following error: XMLHttpRequest cannot load https://localhost:44302/path/to/template.html. Response for preflight has invalid HTTP status code 405 XMLHttpRequest cannot load https://localhost:44302/path/to/template.html. Response for preflight has invalid HTTP status code 405 .

If I remove the code that is setting an 'Authorization' header, the template works perfectly cross-domain.

It looks like the only difference in the request with the interceptor is it has the following headers:

access-control-request-headers:authorization access-control-request-method:GET

Could this be causing the template to not be loaded?

Answer 1

This was solved by setting up CORS in the ASP.NET web side instead of the Angular side.

We enabled it in the Startup.cs file with a private method. We have a Web.config setting called Cors.AllowedOrigins which contains a ; separated string with each application we want to allow in CORS.

    private void EnableCors(IAppBuilder app)
    {
        var policy = new CorsPolicy
        {
            AllowAnyMethod = true,
            AllowAnyHeader = true
        };

        var origins = ConfigurationManager.AppSettings["Cors.AllowedOrigins"];
        if (origins != null)
        {
            foreach (var origin in origins.Split(';'))
            {
                policy.Origins.Add(origin);
            }
        }
        else
        {
            policy.AllowAnyOrigin = true;
        }

        var corsOptions = new CorsOptions
        {
            PolicyProvider = new CorsPolicyProvider
            {
                PolicyResolver = context => Task.FromResult(policy)
            }
        };
        app.UseCors(corsOptions);
    }

And we called this in the Configuration method, passing the IAppBuilder .

Answer 2

Adding the header makes the browser make a preflight OPTIONS request, and the server returns a 405 for that OPTIONS request. The browser then aborts the "real" request. Only simple requests can be made without the need of this preflight request. You can only use a limited set of headers to qualify as simple request

If you can serve the template on the same domain and port, it will not be a CORS request and this preflight request will not be made. If not, you can send the correct response to the OPTIONS request using this guide .