title: Angular11 web app Blocked by CORS policy: access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response
body: <p>I'm trying to develop a web app locally using reddit api with angular 11 and I'm trying to get an auth token using the instructions from this link: <a href="https://github.com/reddit-archive/reddit/wiki/OAuth2" rel="nofollow noreferrer">Reddit OAuth2 docs</a></p>
  <p>However, I'm running into a bit of a problem.</p>
  <p>I've set up my headers to include the usual methods within a service such as:</p>
  <pre><code>httpOptions = {
  headers: new HttpHeaders({
    &quot;Content-Type&quot;: &quot;application/x-www-form-urlencoded&quot;,
    &quot;Access-Control-Allow-Origin&quot;: &quot;*&quot;,
    &quot;Access-Control-Allow-Methods&quot;: &quot;GET, HEAD, OPTIONS,POST, PUT&quot;,
    &quot;Access-Control-Allow-Headers&quot;: &quot;Origin, X-Requested-With, Content-Type, Accept, x-client-key, x-client-token, x-client-secret, Authorization&quot;,
  })
  </code></pre>
  <p>};</p>
  <p>And I set up the function to retrieve the auth token within the service with:</p>
  <pre><code>getRedditAuthToken() {
   console.log(&quot;Auth token&quot;);
   return this.http.get&lt;any&gt;(this.redditAuthUrl, this.httpOptions);
  }
  </code></pre>
  <p>The redditAuthUrl is set with the following parameters taken from reddit's oAuth documentation:</p>
  <pre><code>https://www.reddit.com/api/v1/authorize?client_id=CLIENT_ID&amp;response_type=TYPE&amp;
  state=RANDOM_STRING&amp;redirect_uri=URI&amp;duration=DURATION&amp;scope=SCOPE_STRING
  </code></pre>
  <p>Finally, the service is being retrieved by the component with:</p>
  <pre><code>getRedditAuthToken(): void {
      this.redditService.getRedditAuthToken().subscribe((data) =&gt; {
        console.log(data);
      });
    }
  </code></pre>
  <p>I'm getting the follow errors though when trying to access the auth token (found on web inspector):</p>
  <pre><code>Access to XMLHttpRequest at 'https://www.reddit.com/api/v1/authorize.compact?client_id=&lt;client_id&gt;&amp;response_type=code&amp;state=&lt;random_string&gt;&amp;redirect_uri=http://localhost:4200/reddit&amp;duration=temporary&amp;scope=identity' from origin 'http://localhost:4200' has been blocked by CORS policy: Request header field access-control-allow-origin is not allowed by Access-Control-Allow-Headers in preflight response
  GET https://www.reddit.com/api/v1/authorize.compact?client_id=&lt;client_id&gt;&amp;response_type=code&amp;state=&lt;random_string&gt;&amp;redirect_uri=http://localhost:4200/reddit&amp;duration=temporary&amp;scope=identity net::ERR_FAILED
  ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: &quot;Unknown Error&quot;, url: &quot;https://www.reddit.com/api/v1/authorize.compact?cl…ost:4200/reddit&amp;duration=temporary&amp;scope=identity&quot;, ok: false, …}
  </code></pre>
  <p>I've had several attempts at solutions like starting angular with proxy json file, modifying the httpHeaders, testing the other reddit oAuth token retrievals (using post method), but I'm always getting the same CORS issues.</p>