Http Request headers not working properly, Angular 5
I'm building an Angular 5 app where I am making an api request to an external server. I am trying to hard-code some headers, including content-type and an 'x-api-key'. In postman, the request works perfectly, so I know I have the correct information.
The issue is that I will add headers to the request, and when I console.log the request options it will show them in an array, but upon inspecting it in the network tab, it will only show the titles of the headers I included (content-type and x-api-key) and not the values themselves. I receive a 403/forbidden error, so I know the API recognizes the request but I"m not authorized to get the information. See below-
Here's how I'm adding the headers:
auth.service.ts
createAuthorizationHeader(headers: Headers) {
headers.append('Authorization', 'Basic ' + btoa('username:password'));
headers.append('x-api-key', '...');
headers.append('Content-type', 'application/json')
}
then where I call the api-
logInUser(signInData: { username: string, password: string }): Observable<Response> {
let headers2 = new Headers();
this.createAuthorizationHeader(headers2);
return this.authService.post('http://api_url.com', signInData,{
headers: headers2
})
When I console.log the request options:
How might I restructure things so that the full values of my headers will be recognized in my request? Any information will help! THANK YOU
p.s. I previously was using a Rails API, so in order to connect I would use the Angular2Token Module along with the 'cors' gem to make requests, so I am trying to transition away from it.
angular api http asked Nov 26 '18 at 3:16
LaurenAHLaurenAH
17911
|
show 6 more comments
I'm building an Angular 5 app where I am making an api request to an external server. I am trying to hard-code some headers, including content-type and an 'x-api-key'. In postman, the request works perfectly, so I know I have the correct information.
The issue is that I will add headers to the request, and when I console.log the request options it will show them in an array, but upon inspecting it in the network tab, it will only show the titles of the headers I included (content-type and x-api-key) and not the values themselves. I receive a 403/forbidden error, so I know the API recognizes the request but I"m not authorized to get the information. See below-
Here's how I'm adding the headers:
auth.service.ts
createAuthorizationHeader(headers: Headers) {
headers.append('Authorization', 'Basic ' + btoa('username:password'));
headers.append('x-api-key', '...');
headers.append('Content-type', 'application/json')
}
then where I call the api-
logInUser(signInData: { username: string, password: string }): Observable<Response> {
let headers2 = new Headers();
this.createAuthorizationHeader(headers2);
return this.authService.post('http://api_url.com', signInData,{
headers: headers2
})
When I console.log the request options:
How might I restructure things so that the full values of my headers will be recognized in my request? Any information will help! THANK YOU
p.s. I previously was using a Rails API, so in order to connect I would use the Angular2Token Module along with the 'cors' gem to make requests, so I am trying to transition away from it.
angular api http asked Nov 26 '18 at 3:16
LaurenAHLaurenAH
17911
Are there any CORS errors in your console?
– xyz
Nov 26 '18 at 3:22
1
When using Postman you are accessing the API through same origin(you access API directly through API URL), when using your frontend app, a different origin is accessing the API(Front end URL is internall access API URL) so you get those errors.
– xyz
Nov 26 '18 at 3:54
1
new HttpHeaders();andheaders = headers.append('Authorization', 'Basic ' + btoa('username:password'));andheaders = headers.append('x-api-key', '...');and so on...
– Gabriel Lopez
Nov 26 '18 at 4:20
2
I believe that it isAccess-Control-Allow-Origincausing the issue, You are usingRequestOptions()for setting Objects right? For now you are seeing Provisional Headers, they are not real. First fix your CORS issue I think you should be good to go!
– xyz
Nov 26 '18 at 4:23
1
@LaurenAH have you triedheaders.set('Authorization', 'Basic ' + btoa('username:password'));instead ofheaders.append('Authorization', 'Basic ' + btoa('username:password'));this????
– Sanoj_V
Nov 26 '18 at 5:32
|
show 6 more comments
I'm building an Angular 5 app where I am making an api request to an external server. I am trying to hard-code some headers, including content-type and an 'x-api-key'. In postman, the request works perfectly, so I know I have the correct information.
The issue is that I will add headers to the request, and when I console.log the request options it will show them in an array, but upon inspecting it in the network tab, it will only show the titles of the headers I included (content-type and x-api-key) and not the values themselves. I receive a 403/forbidden error, so I know the API recognizes the request but I"m not authorized to get the information. See below-
Here's how I'm adding the headers:
auth.service.ts
createAuthorizationHeader(headers: Headers) {
headers.append('Authorization', 'Basic ' + btoa('username:password'));
headers.append('x-api-key', '...');
headers.append('Content-type', 'application/json')
}
then where I call the api-
logInUser(signInData: { username: string, password: string }): Observable<Response> {
let headers2 = new Headers();
this.createAuthorizationHeader(headers2);
return this.authService.post('http://api_url.com', signInData,{
headers: headers2
})
When I console.log the request options:
How might I restructure things so that the full values of my headers will be recognized in my request? Any information will help! THANK YOU
p.s. I previously was using a Rails API, so in order to connect I would use the Angular2Token Module along with the 'cors' gem to make requests, so I am trying to transition away from it.
angular api http asked Nov 26 '18 at 3:16
LaurenAHLaurenAH
17911
I'm building an Angular 5 app where I am making an api request to an external server. I am trying to hard-code some headers, including content-type and an 'x-api-key'. In postman, the request works perfectly, so I know I have the correct information.
The issue is that I will add headers to the request, and when I console.log the request options it will show them in an array, but upon inspecting it in the network tab, it will only show the titles of the headers I included (content-type and x-api-key) and not the values themselves. I receive a 403/forbidden error, so I know the API recognizes the request but I"m not authorized to get the information. See below-
Here's how I'm adding the headers:
auth.service.ts
createAuthorizationHeader(headers: Headers) {
headers.append('Authorization', 'Basic ' + btoa('username:password'));
headers.append('x-api-key', '...');
headers.append('Content-type', 'application/json')
}
then where I call the api-
logInUser(signInData: { username: string, password: string }): Observable<Response> {
let headers2 = new Headers();
this.createAuthorizationHeader(headers2);
return this.authService.post('http://api_url.com', signInData,{
headers: headers2
})
When I console.log the request options:
How might I restructure things so that the full values of my headers will be recognized in my request? Any information will help! THANK YOU
p.s. I previously was using a Rails API, so in order to connect I would use the Angular2Token Module along with the 'cors' gem to make requests, so I am trying to transition away from it.
angular api http angular api http asked Nov 26 '18 at 3:16
LaurenAHLaurenAH
17911
asked Nov 26 '18 at 3:16
LaurenAHLaurenAH
17911
asked Nov 26 '18 at 3:16
LaurenAHLaurenAH
17911
asked Nov 26 '18 at 3:16
LaurenAHLaurenAH
17911
asked Nov 26 '18 at 3:16
LaurenAHLaurenAH
17911
17911
Are there any CORS errors in your console?
– xyz
Nov 26 '18 at 3:22
1
When using Postman you are accessing the API through same origin(you access API directly through API URL), when using your frontend app, a different origin is accessing the API(Front end URL is internall access API URL) so you get those errors.
– xyz
Nov 26 '18 at 3:54
1
new HttpHeaders();andheaders = headers.append('Authorization', 'Basic ' + btoa('username:password'));andheaders = headers.append('x-api-key', '...');and so on...
– Gabriel Lopez
Nov 26 '18 at 4:20
2
I believe that it isAccess-Control-Allow-Origincausing the issue, You are usingRequestOptions()for setting Objects right? For now you are seeing Provisional Headers, they are not real. First fix your CORS issue I think you should be good to go!
– xyz
Nov 26 '18 at 4:23
1
@LaurenAH have you triedheaders.set('Authorization', 'Basic ' + btoa('username:password'));instead ofheaders.append('Authorization', 'Basic ' + btoa('username:password'));this????
– Sanoj_V
Nov 26 '18 at 5:32
|
show 6 more comments
Are there any CORS errors in your console?
– xyz
Nov 26 '18 at 3:22
1
When using Postman you are accessing the API through same origin(you access API directly through API URL), when using your frontend app, a different origin is accessing the API(Front end URL is internall access API URL) so you get those errors.
– xyz
Nov 26 '18 at 3:54
1
new HttpHeaders();andheaders = headers.append('Authorization', 'Basic ' + btoa('username:password'));andheaders = headers.append('x-api-key', '...');and so on...
– Gabriel Lopez
Nov 26 '18 at 4:20
2
I believe that it isAccess-Control-Allow-Origincausing the issue, You are usingRequestOptions()for setting Objects right? For now you are seeing Provisional Headers, they are not real. First fix your CORS issue I think you should be good to go!
– xyz
Nov 26 '18 at 4:23
1
@LaurenAH have you triedheaders.set('Authorization', 'Basic ' + btoa('username:password'));instead ofheaders.append('Authorization', 'Basic ' + btoa('username:password'));this????
– Sanoj_V
Nov 26 '18 at 5:32
Are there any CORS errors in your console?
– xyz
Nov 26 '18 at 3:22
Are there any CORS errors in your console?
– xyz
Nov 26 '18 at 3:22
1
1
When using Postman you are accessing the API through same origin(you access API directly through API URL), when using your frontend app, a different origin is accessing the API(Front end URL is internall access API URL) so you get those errors.
– xyz
Nov 26 '18 at 3:54
When using Postman you are accessing the API through same origin(you access API directly through API URL), when using your frontend app, a different origin is accessing the API(Front end URL is internall access API URL) so you get those errors.
– xyz
Nov 26 '18 at 3:54
1
1
new HttpHeaders(); and headers = headers.append('Authorization', 'Basic ' + btoa('username:password')); and headers = headers.append('x-api-key', '...'); and so on...– Gabriel Lopez
Nov 26 '18 at 4:20
new HttpHeaders(); and headers = headers.append('Authorization', 'Basic ' + btoa('username:password')); and headers = headers.append('x-api-key', '...'); and so on...– Gabriel Lopez
Nov 26 '18 at 4:20
2
2
I believe that it is
Access-Control-Allow-Origin causing the issue, You are using RequestOptions() for setting Objects right? For now you are seeing Provisional Headers, they are not real. First fix your CORS issue I think you should be good to go!– xyz
Nov 26 '18 at 4:23
I believe that it is
Access-Control-Allow-Origin causing the issue, You are using RequestOptions() for setting Objects right? For now you are seeing Provisional Headers, they are not real. First fix your CORS issue I think you should be good to go!– xyz
Nov 26 '18 at 4:23
1
1
@LaurenAH have you tried
headers.set('Authorization', 'Basic ' + btoa('username:password')); instead of headers.append('Authorization', 'Basic ' + btoa('username:password')); this????– Sanoj_V
Nov 26 '18 at 5:32
@LaurenAH have you tried
headers.set('Authorization', 'Basic ' + btoa('username:password')); instead of headers.append('Authorization', 'Basic ' + btoa('username:password')); this????– Sanoj_V
Nov 26 '18 at 5:32
|
show 6 more comments
0
active
oldest
votes
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53474352%2fhttp-request-headers-not-working-properly-angular-5%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53474352%2fhttp-request-headers-not-working-properly-angular-5%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Are there any CORS errors in your console?
– xyz
Nov 26 '18 at 3:22
1
When using Postman you are accessing the API through same origin(you access API directly through API URL), when using your frontend app, a different origin is accessing the API(Front end URL is internall access API URL) so you get those errors.
– xyz
Nov 26 '18 at 3:54
1
new HttpHeaders();andheaders = headers.append('Authorization', 'Basic ' + btoa('username:password'));andheaders = headers.append('x-api-key', '...');and so on...– Gabriel Lopez
Nov 26 '18 at 4:20
2
I believe that it is
Access-Control-Allow-Origincausing the issue, You are usingRequestOptions()for setting Objects right? For now you are seeing Provisional Headers, they are not real. First fix your CORS issue I think you should be good to go!– xyz
Nov 26 '18 at 4:23
1
@LaurenAH have you tried
headers.set('Authorization', 'Basic ' + btoa('username:password'));instead ofheaders.append('Authorization', 'Basic ' + btoa('username:password'));this????– Sanoj_V
Nov 26 '18 at 5:32