Angular interceptors and CORS

Question

I am trying to write an interceptor to add a token to all HTTP requests using Angular. I am using roughly the recipe given here - https://thinkster.io/interceptors

S

Answer 1

The server that’s responding to the request needs to send the Access-Control-Allow-Origin response header for OPTIONS requests, not just for GET and POST requests.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests

Response to preflight request doesn't pass access control check

The reason the browser gives you that error is: before it attempts the actual request you’re trying to make from your frontend JS code, the browser sends an OPTIONS request to see if the server responds in a way indicating it’s opting in to receiving requests of the kind you’re trying to make.

So your server-side code needs to add handling for the OPTIONS request to respond with Access-Control-Allow-Origin, Access-Control-Allow-Headers & Access-Control-Allow-Methods.

Does anything at all need to be done on client side to fix CORS related issues - or is it all a server side concern?

There’s nothing you can do on the client side to change the behavior or to get your browser to not emit that error. CORS config is all a server-side concern. Your server must handle the OPTIONS.

The response had HTTP status code 403.

That indicates an authorization failure. That could be just because your server isn’t configured to ever send a success response (200 or 204) for OPTIONS requests—in which case you must configure to to do that (to send a 200 or 204 with the right Access-Control-Allow-* headers and no response body)—or it could be because you’re trying to send a request that requires authorization and the authorization is failing.

Answer 2

The same-origin policy is a critical security mechanism that restricts how a document or script loaded from one origin can interact with a resource from another origin. It helps isolate potentially malicious documents, reducing possible attack vectors.

This makes your app more secure.

CORS gives web servers the ability to say they want to opt into allowing cross-origin access to their resources.

Instead of using CORS, I recommend you use a proxy in your angular server, so:

• in the browser, the real resource wont be displayed (more privacy and security)
• your code is more isolated from the specific source

Implementation

Create a proxy.conf.json in your app

{

    "/client-api/*": {
      "target": "http://127.0.0.1",
      "pathRewrite": { "^/client-api": "" },
      "secure": false,
      "logLevel": "debug",
      "changeOrigin": true
    }
  }

In your angular.json file, under projects.<your-project-name>.architect.serve.options add

"proxyConfig": "src/proxy.conf.json"

Where you make the http request, just use the url origin client-api.

For example, to get the list of countries, you request client-api/countries, and the proxy will transform it to http://127.0.0.1/countries