Angular 2 HttpPost to Oauth2

Question

I'm doing an HttpPost and is giving to me error 401 but I've searched a lot on StackOverflow and I guess my call is OK, but the problem is when I execute this HttpPost on my ARC if I do not put the authorization: user:password it will popup a message saying this :

And I have to put it manually, BUT even if I do this :

It will pop up the Authentication required.

And it automatically changed to something like

authorization: Basic JvbnyZpZpzZWNTcHNQX=

And now, the code looks like this :

My headers

 private headers = new Headers({ 'Content-Type': 'application/x-www-form-urlencoded' });
 private apiUrl = 'https://myApiTest/oauth/token';




var auth = "Basic " + Base64.encode("test:test");//Also have tried to copy the hexgenerated by ARC
    this.headers.append('authorization', auth);
    var body = 'grant_type=password&username=test@test.com&password=test';
     return new Promise((resolve, reject) => {
      this.http.post(this.apiUrl,body, {
            headers: this.headers
          })
        .subscribe(res => {
          alert(res.json());
          resolve(res.json());
        }, (err) => {
          reject(err);
          console.log(err);
        });
    });

And this is the error given by console

XMLHttpRequest cannot load https://myApiTest/oauth/token. Response for preflight has invalid HTTP status code 401 OPTIONS https://myApiTest/oauth/token 401 ()

EDIT

I've build it on my Android and it works fine seems like a problem with Google Chrome, I've found to use this : C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --user-data-dir="C:/Chrome dev session2" --disable-web-security but I'd like to use other way.

var body = 'grant_type=password&username=test@test.com&test=test'; Is it your real code? You are putting test=test instead of password=test.. — Janier, Aug 01 '17 at 18:23

score 2 · Accepted Answer · answered Aug 01 '17 at 18:09

2

My initial guess would be that the API doesn't allows a cross domain request(CORS) More on CORS -> CORS

You might need to add middle ware to your API to allow CORS There might be some headers to set here If you are using a node API you might wanna set headers.

res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,OPTIONS');

answered Aug 01 '17 at 18:09

Sumit Dhameja

141
2
9

those options where I have to add on my API? – Skizo-ozᴉʞS ツ Aug 01 '17 at 18:26
Yes.to ur backend server or api . This is a cors issue. You can either do it programatically or there are ways to bypass in chrome for bypassing it for devolopment purposes – Janier Aug 01 '17 at 19:19
@Skizo-ozᴉʞS You need to add them as a middleware in ur API, such that every request goes through it. this is generally done before you declare your routes. – Sumit Dhameja Aug 02 '17 at 01:12
What about if the api accepts CORS already? how do I add the domains on my app? – Skizo-ozᴉʞS ツ Aug 02 '17 at 08:29

score 0 · Answer 2 · answered Aug 02 '17 at 09:58

0

You need to enable CORS.

In your server (https://myApiTest) and also your client requests.

For any domain: Access-Control-Allow-Origin "*"
For just one domain: Access-Control-Allow-Origin "https://your-exact-client-domain"
For multiple domains: https://stackoverflow.com/a/1850482/431841

Finally, I do not recommend you to disable the browser security, that should be your last resort.

Cheers!

answered Aug 02 '17 at 09:58

Antonio Saco

1,620
12
21

On my server is set I guess, as I said when I run this on my Android device it works the only problem is when I do "ionic serve" it says the : XMLHttpRequest cannot load https://myApiTest/oauth/token. Response for preflight has invalid HTTP status code 401 OPTIONS https://myApiTest/oauth/token 401 (), so how do I enable cors on my client request? adding `Access-Control-Allow-Origin "*"`? I did already and doesn't work. – Skizo-ozᴉʞS ツ Aug 02 '17 at 10:01
You are missing the `Origin header` in your client request – Antonio Saco Aug 02 '17 at 10:06
Something like this? `this.headers.append('Access-Control-Allow-Origin', '*');` – Skizo-ozᴉʞS ツ Aug 02 '17 at 10:11
`Access-Control-Allow-Origin` is server-side. For your client request: `this.headers.append('Origin': 'https://myApiTest');` if is not added automatically. – Antonio Saco Aug 02 '17 at 10:19
`http.es5.js:1256 Refused to set unsafe header "Origin"` – Skizo-ozᴉʞS ツ Aug 02 '17 at 10:33
Have you checked this: http://blog.ionic.io/handling-cors-issues-in-ionic/ – Antonio Saco Aug 02 '17 at 11:46

Angular 2 HttpPost to Oauth2

EDIT

2 Answers2

Linked