HTTP status code 401 even though I’m sending credentials in the request

by

You need to configure the server to not require authorization for OPTIONS requests (that is, the server the request is being sent to — not the one serving your frontend code).

That’s because what’s happening is this:

  1. Your code tells your browser it wants to send a request with the Authorization header.
  2. Your browser says, OK, requests with the Authorization header require me to do a CORS preflight OPTIONS to ensure the server allows requests with the Authorization header.
  3. Your browser sends the OPTIONS request without the Authorization header, because the whole purpose of the OPTIONS check is to see if it’s OK to include that header.
  4. Your server sees the OPTIONS request but rejects it with a 401 since it lacks the header.
  5. Your browser expects a 200 or 204 response for the CORS preflight but instead gets that 401. So your browser stops right there and never tries the POST request from your code.

Further details:

The Access-Control-Request-Headers and Access-Control-Request-Method request headers show in the question indicate the browser’s doing a CORS preflight OPTIONS request.

And the presence of the Authorization and Content-Type: application/json request headers in your request are what trigger your browser do that CORS preflight — by sending an OPTIONS request to the server before trying the POST request in your code. And because that OPTIONS preflight fails, the browser stops right there and never attempts the POST.

So you must figure out what part of the server-side code on the server the request is being sent to causes it to require authorization for OPTIONS requests, and change that so it instead responds to OPTIONS with a 200 or 204 success response without requiring authorization.

For specific help on OPTIONS-enabling a Spring server in particular, see the following answers:

More Related Contents:

  1. CORS Error: “requests are only supported for protocol schemes: http…” etc
  2. How to configure CORS in a Spring Boot + Spring Security application?
  3. CORS and Google Maps Places Autocomplete API calls [duplicate]
  4. Why does my JavaScript code receive a “No ‘Access-Control-Allow-Origin’ header is present on the requested resource” error, while Postman does not?
  5. XMLHttpRequest cannot load XXX No ‘Access-Control-Allow-Origin’ header
  6. Enabling CORS in Cloud Functions for Firebase
  7. Angular 2 Sibling Component Communication
  8. JS : Convert Array of Strings to Array of Objects
  9. Angular2 : render a component without its wrapping tag
  10. Angular 4.3.3 HttpClient : How get value from the header of a response?
  11. Angular 4 Interceptor retry requests after token refresh
  12. In Angular, how do you determine the active route?
  13. How to Update a Component without refreshing full page – Angular
  14. script tag in angular2 template / hook when template dom is loaded
  15. CORS – Is it a client-side thing, a server-side thing, or a transport level thing? [duplicate]
  16. How to add background-image using ngStyle (angular2)?
  17. Separate Angular2 TypeScript files and JavaScript files into different folders, maybe ‘dist‘
  18. Call a function on click event in Angular 2
  19. Angular2 too many file requests on load
  20. How to add bootstrap in angular 6 project? [duplicate]
  21. Cross-domain connection in Socket.IO
  22. What are differences between SystemJS and Webpack?
  23. Angular2 dynamic change CSS property
  24. Get current url in Angular [duplicate]
  25. Upgrading to Angular 10 – Fix CommonJS or AMD dependencies can cause optimization bailouts
  26. ng2-charts update labels and data
  27. How to disable Browser back button in Angular 2
  28. Filter Array in Array by date between 2 dates
  29. Performance impact of using css / javascript source-maps in production?
  30. Protractor Angular 2 Failed: unknown error: angular is not defined

Leave a Comment