CORS Header issue between Symfony2 API and Angular2/4

Question

I'am working on a project which has an API built with symfony2 as backend and front end app in Angular2. After logging in and getting token when I try to sent get request to my backend this issue happend

A Token was not found in the TokenStorage

My backend is on online server and my frontend app is run on localhost. I also mention that everything works fine if I use postman.

BACKEND SETTING

#nelmioCorsBundle configuration IN CONFIG.YML
nelmio_cors:
defaults:
    allow_credentials: true
    allow_origin: '*'
    allow_headers: ['accept', 'content-type', 'authorization', 'x-http-method-override']
    allow_methods: ['POST', 'PUT', 'PATCH', 'GET', 'DELETE']
    max_age: 3600


paths:

    '^/':
        allow_origin: ['http://localhost:4201']
        allow_headers: ['Authorization', 'X-Requested-With', 'Content-Type', 'Accept', 'Origin', 'X-Custom-Auth']
        allow_methods: ['POST', 'PUT', 'GET', 'DELETE', 'OPTIONS']
        max_age: 3600
        hosts: []
        origin_regex: false
        hosts: ['^\.']

BACKEND SETTING SECURITY.YML

firewalls:
        login:
            pattern: ^/login
            form_login:
            provider: fos_userbundle
            login_path: /login
            check_path: /login_check
            username_parameter: username
            password_parameter: password
            success_handler: lexik_jwt_authentication.handler.authentication_success
            failure_handler: lexik_jwt_authentication.handler.authentication_failure
            require_previous_session: false
        logout:       true
        anonymous:    true

    api:
        pattern:   ^/
        anonymous: false
        provider: fos_userbundle
        lexik_jwt:  #par defaut check token in Authorization Header prefixer par Bearer
            authorization_header: # check token in Authorization Header
                    enabled: true
                    prefix:  Bearer
                    name:    Authorization
            cookie:               # check token in a cookie
                    enabled: false
                    name:    BEARER
            query_parameter:      # check token in query string parameter
                    enabled: true
                    name:    bearer
            throw_exceptions:        true     # When an authentication failure occurs, return a 401 response immediately
            create_entry_point:      false      # When no authentication details are provided, create a default entry point that returns a 401 response
            authentication_provider: lexik_jwt_authentication.security.authentication.provider
            authentication_listener: lexik_jwt_authentication.security.authentication.listener

FRONT-END SERVICE calling API

  constructor(private http: HttpClient) {

     this.postUrlCommandes='myBackend_Url_Command';
     let my_token = localStorage.getItem('id_token');
     this.headers = new Headers();
     this.headers.append("Access-Control-Allow-Origin", "*");
     this.headers.append('Content-Type', 'application/json');
     this.headers.append("Access-Control-Allow-Credentials", "true");
     this.headers.append('Accept', 'application/json');
     this.headers.append("Authorization", 'Bearer ' +my_token);
     this.options = new RequestOptions({headers: this.headers});

}

// method for get all comand

getListcommandes(idcommande: number): Observable<Commande[]> {

    let myParams= new URLSearchParams();
    //myParams.append('id',idcommande);
    const url=`${this.postUrlCommandes}/${idcommande}`;

    return this.http.get(url,this.headers)
        .map((response: Response) => {
            console.log(" JE SUIS DANS LE SERVICE  ");
            var result = response.json();
            console.log("je  suis longmene resultat"+JSON.stringify(result['mes_commandes']));

            return result;
        });


        // .map(this.parseData)
        // .catch(this.handleError);

}

config.yml file

htpservice.ts

Answer 1

SECURITY.YML

security:
   encoders:
        FOS\UserBundle\Model\UserInterface: bcrypt

   role_hierarchy:
        ROLE_ADMIN:       ROLE_USER
        ROLE_SUPER_ADMIN: ROLE_ADMIN

   providers:
        fos_userbundle:
            id: fos_user.user_provider.username

   firewalls:
       dev:
          pattern:  ^/api/(_(profiler|wdt|doc))/
          security: false


       login:
           pattern:  ^/api/login
           stateless: true
           anonymous: true
           logout:       true
           form_login:
                check_path: /api/login_check
                require_previous_session: false
                username_parameter: username
                password_parameter: password
                success_handler: lexik_jwt_authentication.handler.authentication_success
                failure_handler: lexik_jwt_authentication.handler.authentication_failure

        api:
           pattern:   ^/api
           stateless: true
           anonymous: false
           logout:       true
           provider: fos_userbundle
           guard:
               authenticators:
                    - app.jwt_token_authenticator

   access_control:
    - { path: ^/api/login, roles: IS_AUTHENTICATED_ANONYMOUSLY }
    - { path: ^/api, roles: IS_AUTHENTICATED_FULLY }

and do changes in config.yml

parameters:
    locale: en
    jwt_private_key_path: '%kernel.root_dir%/../var/jwt/private.pem'
    jwt_public_key_path: '%kernel.root_dir%/../var/jwt/public.pem'
    jwt_key_pass_phrase: 'star123'
    jwt_token_ttl: 86400
nelmio_cors:
    paths:
        '^/':
            origin_regex: true
            allow_origin: ['*']
            allow_headers: ['Content-Type','Authorization']
            allow_methods: ['POST', 'PUT', 'GET', 'DELETE']
            max_age: 3600

Answer 2

the above configuration working for me in scenario

 welcome(){
    let headers = new Headers();
    headers.append('Authorization', 'Token ' + localStorage.getItem('id_token'));
    this.http.post(apiUrl, {}, { headers: headers })
        .subscribe(
        data => {
            console.log(data)
         })
  }

your token name must be define in config.yml

allow_headers: ['Content-Type','Authorization']

Answer 3

HI this configuration working for me

in config.yml

nelmio_cors:
    paths:
        '^/':
            origin_regex: true
            allow_origin: ['*']
            allow_headers: ['Content-Type','Authorization']
            allow_methods: ['POST', 'PUT', 'GET', 'DELETE']
            max_age: 3600

angular api call

login(data, apiurl) {
    let headers = new Headers;
    headers.append("Content-Type", "application/json");
    let body = JSON.stringify(data);
    return this.http.post(apiurl, body, { headers: headers })
        .toPromise()
        .then((res: Response) => {
           console.log(res)
        })
        .catch(err=>
         {
         console.log(err)
    });
   }