Authorization header not working Angular 5 - http

I am consuming an JWT based API.
I am passing the Authorization header correctly (I mean in the code),
using headers.set('Authorization', 'token') and i am using the correct method which is GET.
When i serve the application (using ionic 3), i have the error 405 (Method Not Allowed), but the same request works when i use POSTMAN or i paste the code snippet (generated from POSTMAN) into the console.
Here's two captures of the working request (using code snippet from POSTMAN into the console) and the not working request (from the ionic app).
By the way, there is something weird about the authorization, i highlighted it in red.

If it is not a cors issue, you could try according to following code
const httpOptions = {
headers: new HttpHeaders()
.set('Authorization', 'Bearer ' +this.auth_token)
}
return this.http.get('http://xxxxxx00x:8080/api/clients',httpOptions);

On the top screen you have got request method OPTIONS not GET and response from the server is 405 Method not allowed not 401 Unauthorized or 403 Forbidden.
So the problem is not authorization but request method.
Looks like CORS issue.

Related

Logic App Http POST request UnsupportedMediaType error

I am getting the following error in my logic app:
{ "type": "https://errors-api.cloud.com/common/unsupportedMediaType", "detail": "Content type '' not supported", "parameters": null }
The following is my set up:
This works in Postman.
However, I noticed that in the Logic App if I add in a text in the Body section. For example "body". It works fine
The Body is not needed in the Postman so it's confusing to me why it needed in Logic app. Anyone come across similar issue?
Issue is with content-type in your case. I have tried to reproduce issue from my side, but I did not get any error. I have found similar issue like you in link
Also, can you add Accept as shown below in header request,
Accept:*/*
I have created logic app as shown below,
In Get Bearer Token, getting access token from authentication url,
Using access token from Get bearer token getting data from api as shown below,
The logic app ran successfully,

How to implement a Google Cloud Platform (GCP) Authorization call via HTTP call in postman

I want to implement an HTTP call to Google Cloud Platform (GCP) to generate the Authorization token.
Cant find a the correct GCP documentation for the same as well.
Using the reference from below URL, I was able to generate a Authorizaton token from Postman, using postmans Authorization UI and not the HTTP call UI.
https://www.vulongtran.com/how-to-use-postman-with-google-cloud-platform-apis
And the call to GCP API are working using the token generated from above process.
I tried implementing the same call via HTTP POST request, but not getting expected result.
HTTP POST
URL - https://accounts.google.com/o/oauth2/token
Query param-
grant_type:authorization_code
redirect_uri:https://www.getpostman.com/oauth2/callback
Authorization -
Basic Auth
username -
password -
Headers -
scope:https://www.googleapis.com/auth/cloud-platform
redirect_uri:https://www.google.com
And the response that I get is
400 bad request
{ "error": "invalid_request", "error_description": "Missing required parameter: code" }
2nd Try-
Also tried sending the in the request BODY, like below, but the result was same.
{
grant_type:'authorization_code',
redirect_uri:'https://www.getpostman.com/oauth2/callback'
}
Response
{
"error": "invalid_request",
"error_description": "Missing required parameter: code"
}
I saw another page, where 'code' is used in the call. Dont know what language the code on that page is for.
But I am unable to figure out the correct HTTP call to get the token from there as well.
Google OAuth2: Required parameter is missing: grant_type

Axios post request in react-native app

I'm using axios in my react-native app, but I can't make any POST request in android simulator/device. It always return 400 Bad Request from the server.
I've tried to set Content-Type: application/json on headers but it didn't work as well.
on postman the request works as expected.
here's the request config object:
As you know, 400 Bad Request error means that the request you sent to the website server was somehow incorrect or corrupted and the server couldn't understand it.
I think there maybe problems on your request like as wrong URL or params or header format...
PS. Axios post methods syntax is as follows:
axios.post(url[, data[, config]])
You can test any axios method here and put it into your code base after it works.

Vue-Request not sending Authorization Header

I'm using VueJS with vue-request for http requests. I'm trying to subscribe an user to a Mailchimp list but Mailchimp uses BasicAuth, so I'm doing as such:
scope.$http.post('https://us15.api.mailchimp.com/3.0/lists/listid/members',
{...mydata...}, {headers: {Authorization: 'Basic myencodedAPIkey'}})
But I get an error from the API: 401 Unauthorized - Your request did not include an API key.
So I check the Network log on Chrome and the Authorization is on my headers like this: **Access-Control-Request-Headers: authorization** but it should be like **Authorization: myencodedAPIkey**
On the Console the error appears as:
XMLHttpRequest cannot load
https://us15.api.mailchimp.com/3.0/lists/listid/members. Response
to preflight request doesn't pass access control check: No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://127.0.0.1:8000' is therefore not allowed
access. The response had HTTP status code 401.
When I use Postman it works just fine as the header is correctly sent.
This problem seems to have been solved here with setting the header on every request
https://laracasts.com/discuss/channels/vue/how-to-solve-the-allow-control-allow-cross-in-the-vuejs-header-request-setting?page=2
and here through setting it once
Vue-Request not sending Authorization Header
You are getting CORS error, when you are trying to request from one host to another, and the 'another' part does not allow it to happen. To prevent this error you can use webpack proxy configuration, so this way you do not have cross origin request, but I don't know how you will deal with this in production environment if your api does not allow cross origin requests.
In a project I'm working on, our devServer configuration is as follow
proxy: {
'/api': {
target: 'http://localhost:8080/'
}
},
with this, any request happening on /api/any/url will be redirect to localhost:8080/api/any/url

Angular 2 Http Get call with Basic Authentication

There are various questions related to the same concept, but somehow I am not able to figure out a simple HTTP Get call with Angular 2.
I have tried the same service with postman and it works, but not with a angular service.
My code looks like:
Service.js
let headers = new Headers({ 'Authorization': 'Basic ' + btoa('a#b.com:password') });
let options = new RequestOptions({ headers: headers });
return this.http.get(Config.Api.GetNavbar, options).map((res: Response) => res.json());
I get a 401 Unauthorized error even if I am setting the headers.
Any help?
I was facing exactly the same behavior when I was doing my first REST calls with Angular - it worked with Postman but didn't with Angular.
Some Browsers make a so called "preflight" call before the "real" AJAX call, and this first call caused the 401 Unauthorized response. The issue was that I was not allowing OPTIONS headers without authentication. The handling of OPTIONS headers was also in the restricted area but the authentication information was missing so the server send me back a 401 Unauthorized.
In the end the solution was to handle the OPTIONS requests outside of the restricted area. So the client receives now an OK for OPTIONS headers requests and goes on with the "real" call.
Since I have adjusted the request handling on server side everything works as expected.

Resources