[javascript] CORS: credentials mode is 'include'

Yes, I know what you are thinking - yet another CORS question, but this time I'm stumped.

So to start off, the actual error message:

XMLHttpRequest cannot load http://localhost/Foo.API/token. The value of the 'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' when the request's credentials mode is 'include'. Origin 'http://localhost:5000' is therefore not allowed access. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

I'm not sure what is meant by credentials mode is 'include'?

So when I perform the request in postman, I experience no such error:

enter image description here

But when I access the same request through my angularjs web app, I am stumped by this error. Here is my angualrjs request/response. As you'll see the response is OK 200, but I still receive the CORS error:

Fiddler Request and Response:

The following image demonstrates the request and response from web front-end to API

Fiddler

So based on all the other posts I've read online, it seems like I'm doing the right thing, that's why I cannot understand the error. Lastly, here is the code I use within angualrjs (login factory):

enter image description here

CORS Implementation in API - Reference purposes:

Method 1 used:

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        EnableCrossSiteRequests(config);
    }

    private static void EnableCrossSiteRequests(HttpConfiguration config)
    {
        var cors = new EnableCorsAttribute("*", "*", "*")
        {
            SupportsCredentials = true
        };
        config.EnableCors(cors);
    }
}

Method 2 used:

public void Configuration(IAppBuilder app)
{
    HttpConfiguration config = new HttpConfiguration();

    ConfigureOAuth(app);

    WebApiConfig.Register(config);
    app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);
    app.UseWebApi(config);

}

Many thanks in advance!

This question is related to javascript c# angularjs cors asp.net-web-api2

The answer is


The issue stems from your Angular code:

When withCredentials is set to true, it is trying to send credentials or cookies along with the request. As that means another origin is potentially trying to do authenticated requests, the wildcard ("*") is not permitted as the "Access-Control-Allow-Origin" header.

You would have to explicitly respond with the origin that made the request in the "Access-Control-Allow-Origin" header to make this work.

I would recommend to explicitly whitelist the origins that you want to allow to make authenticated requests, because simply responding with the origin from the request means that any given website can make authenticated calls to your backend if the user happens to have a valid session.

I explain this stuff in this article I wrote a while back.

So you can either set withCredentials to false or implement an origin whitelist and respond to CORS requests with a valid origin whenever credentials are involved


If you are using CORS middleware and you want to send withCredentials boolean true, you can configure CORS like this:

_x000D_
_x000D_
var cors = require('cors');    _x000D_
app.use(cors({credentials: true, origin: 'http://localhost:5000'}));
_x000D_
_x000D_
_x000D_

`


Customizing CORS for Angular 5 and Spring Security (Cookie base solution)

On the Angular side required adding option flag withCredentials: true for Cookie transport:

constructor(public http: HttpClient) {
}

public get(url: string = ''): Observable<any> {
    return this.http.get(url, { withCredentials: true });
}

On Java server-side required adding CorsConfigurationSource for configuration CORS policy:

@Configuration
@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

    @Bean
    CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration configuration = new CorsConfiguration();
        // This Origin header you can see that in Network tab
        configuration.setAllowedOrigins(Arrays.asList("http:/url_1", "http:/url_2")); 
        configuration.setAllowedMethods(Arrays.asList("GET","POST"));
        configuration.setAllowedHeaders(Arrays.asList("content-type"));
        configuration.setAllowCredentials(true);
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration);
        return source;
    }

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.cors().and()...
    }
}

Method configure(HttpSecurity http) by default will use corsConfigurationSource for http.cors()


If you're using .NET Core, you will have to .AllowCredentials() when configuring CORS in Startup.CS.

Inside of ConfigureServices

services.AddCors(o => {
    o.AddPolicy("AllowSetOrigins", options =>
    {
        options.WithOrigins("https://localhost:xxxx");
        options.AllowAnyHeader();
        options.AllowAnyMethod();
        options.AllowCredentials();
    });
});

services.AddMvc();

Then inside of Configure:

app.UseCors("AllowSetOrigins");
app.UseMvc(routes =>
    {
        // Routing code here
    });

For me, it was specifically just missing options.AllowCredentials() that caused the error you mentioned. As a side note in general for others having CORS issues as well, the order matters and AddCors() must be registered before AddMVC() inside of your Startup class.


If it helps, I was using centrifuge with my reactjs app, and, after checking some comments below, I looked at the centrifuge.js library file, which in my version, had the following code snippet:

if ('withCredentials' in xhr) {
 xhr.withCredentials = true;
}

After I removed these three lines, the app worked fine, as expected.

Hope it helps!


Just add Axios.defaults.withCredentials=true instead of ({credentials: true}) in client side, and change app.use(cors()) to

app.use(cors(
  {origin: ['your client side server'],
  methods: ['GET', 'POST'],
  credentials:true,
}
))

Questions with javascript tag:

need to add a class to an element How to make a variable accessible outside a function? Hide Signs that Meteor.js was Used How to create a showdown.js markdown extension Please help me convert this script to a simple image slider Highlight Anchor Links when user manually scrolls? Summing radio input values How to execute an action before close metro app WinJS javascript, for loop defines a dynamic variable name Getting all files in directory with ajax Drag and drop menuitems Is it possible to execute multiple _addItem calls asynchronously using Google Analytics? DevTools failed to load SourceMap: Could not load content for chrome-extension TypeError [ERR_INVALID_ARG_TYPE]: The "path" argument must be of type string. Received type undefined raised when starting react app What does 'x packages are looking for funding' mean when running `npm install`? SyntaxError: Cannot use import statement outside a module SameSite warning Chrome 77 "Uncaught SyntaxError: Cannot use import statement outside a module" when importing ECMAScript 6 Why powershell does not run Angular commands? Typescript: No index signature with a parameter of type 'string' was found on type '{ "A": string; } Uncaught Invariant Violation: Too many re-renders. React limits the number of renders to prevent an infinite loop Push method in React Hooks (useState)? JS file gets a net::ERR_ABORTED 404 (Not Found) React Hooks useState() with Object useState set method not reflecting change immediately Can't perform a React state update on an unmounted component UnhandledPromiseRejectionWarning: This error originated either by throwing inside of an async function without a catch block Can I set state inside a useEffect hook internal/modules/cjs/loader.js:582 throw err How to post query parameters with Axios? How to use componentWillMount() in React Hooks? React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing FATAL ERROR: Ineffective mark-compacts near heap limit Allocation failed - JavaScript heap out of memory in ionic 3 How can I force component to re-render with hooks in React? What is useState() in React? How to call loading function with React useEffect only once Objects are not valid as a React child. If you meant to render a collection of children, use an array instead How to reload current page? Center content vertically on Vuetify Getting all documents from one collection in Firestore ERROR Error: Uncaught (in promise), Cannot match any routes. URL Segment How can I add raw data body to an axios request? Sort Array of object by object field in Angular 6 Uncaught SyntaxError: Unexpected end of JSON input at JSON.parse (<anonymous>) Axios Delete request with body and headers? Enable CORS in fetch api Vue.js get selected option on @change Bootstrap 4 multiselect dropdown Cross-Origin Read Blocking (CORB) Angular 6: How to set response type as text while making http call

Questions with c# tag:

How can I convert this one line of ActionScript to C#? Microsoft Advertising SDK doesn't deliverer ads How to use a global array in C#? How to correctly write async method? C# - insert values from file into two arrays Uploading into folder in FTP? Are these methods thread safe? dotnet ef not found in .NET Core 3 HTTP Error 500.30 - ANCM In-Process Start Failure Best way to "push" into C# array How can I add raw data body to an axios request? Couldn't process file resx due to its being in the Internet or Restricted zone or having the mark of the web on the file Convert string to boolean in C# Entity Framework Core: A second operation started on this context before a previous operation completed ASP.NET Core - Swashbuckle not creating swagger.json file Is ConfigurationManager.AppSettings available in .NET Core 2.0? No authenticationScheme was specified, and there was no DefaultChallengeScheme found with default authentification and custom authorization Getting value from appsettings.json in .net core .net Core 2.0 - Package was restored using .NetFramework 4.6.1 instead of target framework .netCore 2.0. The package may not be fully compatible Automatically set appsettings.json for dev and release environments in asp.net core? How to use log4net in Asp.net core 2.0 Get ConnectionString from appsettings.json instead of being hardcoded in .NET Core 2.0 App Unable to create migrations after upgrading to ASP.NET Core 2.0 Update .NET web service to use TLS 1.2 Using app.config in .Net Core How to send json data in POST request using C# ASP.NET Core form POST results in a HTTP 415 Unsupported Media Type response How to enable CORS in ASP.net Core WebAPI VS 2017 Metadata file '.dll could not be found How to set combobox default value? How to get root directory of project in asp.net core. Directory.GetCurrentDirectory() doesn't seem to work correctly on a mac ALTER TABLE DROP COLUMN failed because one or more objects access this column Error: the entity type requires a primary key How to POST using HTTPclient content type = application/x-www-form-urlencoded CORS: credentials mode is 'include' Visual Studio 2017: Display method references Where is NuGet.Config file located in Visual Studio project? Unity Scripts edited in Visual studio don't provide autocomplete How to create roles in ASP.NET Core and assign them to users? Return file in ASP.Net Core Web API ASP.NET Core return JSON with status code auto create database in Entity Framework Core Class Diagrams in VS 2017 How to read/write files in .Net Core? How to read values from the querystring with ASP.NET Core? how to set ASPNETCORE_ENVIRONMENT to be considered for publishing an asp.net core application? ASP.NET Core Get Json Array using IConfiguration Entity Framework Core add unique constraint code-first No templates in Visual Studio 2017 ps1 cannot be loaded because running scripts is disabled on this system

Questions with angularjs tag:

AngularJs directive not updating another directive's scope ERROR in Cannot find module 'node-sass' CORS: credentials mode is 'include' CORS error :Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response WebSocket connection failed: Error during WebSocket handshake: Unexpected response code: 400 Print Html template in Angular 2 (ng-print in Angular 2) $http.get(...).success is not a function Angular 1.6.0: "Possibly unhandled rejection" error Find object by its property in array of objects with AngularJS way Error: Cannot invoke an expression whose type lacks a call signature Error : getaddrinfo ENOTFOUND registry.npmjs.org registry.npmjs.org:443 Disable Chrome strict MIME type checking Consider marking event handler as 'passive' to make the page more responsive Angular get object from array by Id SyntaxError: Unexpected token o in JSON at position 1 Failed to load resource 404 (Not Found) - file location error? Use of symbols '@', '&', '=' and '>' in custom directive's scope binding: AngularJS Usage of $broadcast(), $emit() And $on() in AngularJS How to return data from promise Send FormData with other field in AngularJS check null,empty or undefined angularjs How to run html file using node js how to find array size in angularjs How to filter array when object key value is in array How do I fix the npm UNMET PEER DEPENDENCY warning? Send multipart/form-data files with angular using $http Display number always with 2 decimal places in <input> Angular pass callback function to child component as @Input similar to AngularJS way ng-if check if array is empty Firebase TIMESTAMP to date and Time What is the Angular equivalent to an AngularJS $watch? Generate PDF from HTML using pdfMake in Angularjs AngularJS POST Fails: Response for preflight has invalid HTTP status code 404 Why and when to use angular.copy? (Deep Copy) How to make use of ng-if , ng-else in angularJS Check if value exists in the array (AngularJS) How to check for an empty object in an AngularJS view TypeError: window.initMap is not a function CORS with spring-boot and angularjs not working File Upload with Angular Material AngularJS $watch window resize inside directive Unexpected token < in first line of HTML Module is not available, misspelled or forgot to load (but I didn't) Assign value from successful promise resolve to external variable How to send POST in angularjs with multiple params? ng if with angular for string contains Should I use typescript? or I can just use ES6? How do I trim() a string in angularjs? How to push object into an array using AngularJS Adding class to element using Angular JS

Questions with cors tag:

Axios having CORS issue Cross-Origin Read Blocking (CORB) Jquery AJAX: No 'Access-Control-Allow-Origin' header is present on the requested resource How to allow CORS in react.js? Set cookies for cross origin requests XMLHttpRequest blocked by CORS Policy How to enable CORS in ASP.net Core WebAPI No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API How to overcome the CORS issue in ReactJS Trying to use fetch and pass in mode: no-cors CORS: credentials mode is 'include' Enabling CORS in Cloud Functions for Firebase Uncaught (in promise) TypeError: Failed to fetch and Cors error CORS error :Request header field Authorization is not allowed by Access-Control-Allow-Headers in preflight response Access to Image from origin 'null' has been blocked by CORS policy 'Access-Control-Allow-Origin' issue when API call made from React (Isomorphic app) Spring security CORS Filter Adding Access-Control-Allow-Origin header response in Laravel 5.3 Passport How to configure CORS in a Spring Boot + Spring Security application? What is an opaque response, and what purpose does it serve? CORS with POSTMAN No 'Access-Control-Allow-Origin' header in Angular 2 app How can I enable CORS on Django REST Framework Response to preflight request doesn't pass access control check XMLHttpRequest cannot load XXX No 'Access-Control-Allow-Origin' header API Gateway CORS: no 'Access-Control-Allow-Origin' header Spring CORS No 'Access-Control-Allow-Origin' header is present How to create cross-domain request? AngularJS POST Fails: Response for preflight has invalid HTTP status code 404 No 'Access-Control-Allow-Origin' header is present on the requested resource - Resteasy Laravel 5.1 API Enable Cors Request header field Access-Control-Allow-Headers is not allowed by itself in preflight response CORS with spring-boot and angularjs not working What are the integrity and crossorigin attributes? CORS header 'Access-Control-Allow-Origin' missing Why is an OPTIONS request sent and can I disable it? AngularJS: No "Access-Control-Allow-Origin" header is present on the requested resource How to allow Cross domain request in apache2 Asp.Net WebApi2 Enable CORS not working with AspNet.WebApi.Cors 5.2.3 No 'Access-Control-Allow-Origin' header is present on the requested resource error MVC web api: No 'Access-Control-Allow-Origin' header is present on the requested resource How can I fix the 'Missing Cross-Origin Resource Sharing (CORS) Response Header' webfont issue? Solve Cross Origin Resource Sharing with Flask Request header field Access-Control-Allow-Headers is not allowed by Access-Control-Allow-Headers How to enable CORS in flask Font from origin has been blocked from loading by Cross-Origin Resource Sharing policy How to enable CORS on Firefox? Keep getting No 'Access-Control-Allow-Origin' error with XMLHttpRequest What exactly does the Access-Control-Allow-Credentials header do? Firefox 'Cross-Origin Request Blocked' despite headers

Questions with asp.net-web-api2 tag:

CORS: credentials mode is 'include' FromBody string parameter is giving null Web API optional parameters HTTP 415 unsupported media type error when calling Web API 2 endpoint Asp.Net WebApi2 Enable CORS not working with AspNet.WebApi.Cors 5.2.3 How to implement oauth2 server in ASP.NET MVC 5 and WEB API 2 Pass multiple complex objects to a post/put Web API method Where can I find a NuGet package for upgrading to System.Web.Http v5.0.0.0? How to get base URL in Web API controller? No connection could be made because the target machine actively refused it?