title: Angular interceptors and CORS
body: <p>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 - <a href="https://thinkster.io/interceptors" rel="nofollow noreferrer">https://thinkster.io/interceptors</a></p>
  
  <p>So the code uses http module factory and a <code>tokenInterceptor()</code> function. I can successfully add a token as a header to the request - but now when it passes through the interceptor, it gets blocked by some kind of CORS blocking mechanism. I get this error in chrome console -</p>
  
  <blockquote>
    <p>XMLHttpRequest cannot load <a href="http://127.0.0.1" rel="nofollow noreferrer">http://127.0.0.1</a>:/.
    Response to preflight request doesn't pass access control check: No
    'Access-Control-Allow-Origin' header is present on the requested
    resource. Origin '<a href="http://127.0.0.1" rel="nofollow noreferrer">http://127.0.0.1</a>:/' is
    therefore not allowed access. The response had HTTP status code 403.</p>
  </blockquote>
  
  <p>I tried setting the access control allow origin header like below in my interceptor to no avail:</p>
  
  <pre><code>config.headers['Access-Control-Allow-Origin'] = '*';
  </code></pre>
  
  <p>I have tried some suggestions online but none helped. Does anything at all need to be done on client side to fix CORS related issues - or is it all a server side concern?</p>