title: CORS issue after adding interceptor in angular
body: <p>I was sending API request from angular it had CORS issue so i fixed it in server using below code(laravel).</p>
  
  <pre><code>&lt;?php
  
  namespace App\Http\Middleware;
  
  use Closure;
  
  class Cors
  {
      /**
       * Handle an incoming request.
       *
       * @param  \Illuminate\Http\Request $request
       * @param  \Closure $next
       * @return mixed
       */
      public function handle($request, Closure $next)
      {
          return $next($request)
              -&gt;header('Access-Control-Allow-Origin', '*')
              -&gt;header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
              -&gt;header('Access-Control-Allow-Headers', '*');
      }
  }
  </code></pre>
  
  <p>But, now i changed my angular request it now goes through interceptor and now the CORS issue is back again.</p>
  
  <p><strong>Interceptor code:</strong></p>
  
  <pre><code>import {Injectable, NgModule} from '@angular/core';
  import {
    HttpRequest,
    HttpHandler,
    HttpEvent,
    HttpInterceptor, HTTP_INTERCEPTORS
  } from '@angular/common/http';
  import { Observable } from 'rxjs/Observable';
  import {LoginService} from './login.service';
  @Injectable()
  export class TokenInterceptor implements HttpInterceptor {
    constructor(public auth: LoginService) {}
    intercept(request: HttpRequest&lt;any&gt;, next: HttpHandler): Observable&lt;HttpEvent&lt;any&gt;&gt; {
  
      request = request.clone({
        setHeaders: {
          Authorization: `Bearer ${this.auth.getToken()}`
        }
      });
      return next.handle(request);
    }
  }
  
  @NgModule({
    providers: [
      { provide: HTTP_INTERCEPTORS, useClass: TokenInterceptor, multi: true }
    ]
  })
  export class InterceptorModule { }
  </code></pre>
  
  <p><strong>Error:</strong></p>
  
  <pre><code>Failed to load http://127.0.0.1:8000/api/auth/login: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.
  </code></pre>
  
  <p>Note: The API calls are working perfect if interceptor is not there.</p>
  
  <p><strong>Sample API Call</strong></p>
  
  <pre><code>loginUser() {
      const body = new HttpParams()
        .set('password', this.password)
        .set('email', this.email);
      this.http.post&lt;any[]&gt;(this.apiUrl.getBaseUrl() + 'auth/login', body).subscribe(data =&gt; {
        console.log(data);
        const status = data['status'];
        if (status === 'success') {
          this.setSuccess(data['message']);
          this.email = '';
          this.password = '';
          this.loginService.setToken(data['token']);
        } else {
          this.setError(data['message']);
        }
  
      }, err =&gt; {
        this.setError('Server error occurred');
      });
    }
  </code></pre>