How to add Headers on AngularJS 1.6 correctly

Question

I am trying to add headers in a get request using $http .

This is my piece of code:

this.http.defaults.headers.common['Authorization'] = 'Bearer mytoken123123';
this.http.defaults.headers.common['Access-Control-Allow-Origin'] =  '*';
this.http.defaults.headers.common['Access-Control-Allow-Methods'] ='GET, POST, PATCH, PUT, DELETE, OPTIONS';
this.http.defaults.headers.common['Access-Control-Allow-Headers'] = 'Origin, Content-Type, X-Auth-Token';
this.http.defaults.headers.common['Access-Control-Allow-Credentials'] = 'true';

this.http.get(" https://xxxxxx/GetUserProfille?User_Id=" + response.data.Data.User_Id + "&LanguageCode=" + this.currentLang).then((response) => {
     console.log(response)
});

And this is the error.

angular.min.js:107 OPTIONS 
https://xxxxxxx/GetUserProfille?User_Id=11641&LanguageCode=it 405 (Method Not Allowed)
https://xxxxxxx/GetUserProfille?User_Id=xxx&LanguageCode=xx: Response to 
preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://localhost:8080' is therefore not allowed access. The response had HTTP status code 405.

angular.min.js:122 Possibly unhandled rejection: {"data":null,"status":-1,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"jsonpCallbackParam":"callback","url":" https://staging.paladintrue.com/api/paladin/GetUserProfille?User_Id=11641&LanguageCode=it","headers":{"Accept":"application/json, text/plain, */*","Authorization":"bearer 2kqV-V3v1t_6MtI8Vg8BPpoq2BXR6Q1vqEu9rKw6Qd86CHqKxtYIQfjJhUJqM5Jzi2K0h6sAXaltIxCOoEXUCz8UeHFs7HGhxY2t22yBPUuRRGzmu7O52y_AjdHwlijsEW6KDzqWzhR5hSqNrYm51yHCNmfhkkhocOt8_EDwNljnKycIdYXOOApzaSF_Jm88eJ9cMilTavsmgqd_DAAuSV24aNqf6cJdZYE0w_KTHk7P--oul4SEgpfQYW64PNSU","Access-Control-Allow-Origin":"*","Access-Control-Allow-Methods":"GET, POST, PATCH, PUT, DELETE, OPTIONS","Access-Control-Allow-Headers":"Origin, Content-Type, X-Auth-Token","Access-Control-Allow-Credentials":"true"}},"statusText":""}

If you see the headers request in the browser, it seems that the headers I have added are all of them in Access-Control-Request-Headers:access-control-allow-credentials,access-control-allow-headers,access-control-allow-methods,access-control-allow-origin,authorization

So, I understand that it is not the correct way to add headers.

Answer 1

You can pass HTTP headers as part of the $http configuration object:

$http.get('https://www.example.com/', {
    headers: {
        'Authorization': 'Bearer mytoken123123',
        'Access-Control-Allow-Origin': '*'
        // etc.
    }
});