Http post Request error *No access control origin * in ionic

Ionic Framework ionic-v3
1

Error:

XMLHttpRequest cannot load http://54.200.35.237/Texaco-ServerApi/V1/User/user_login. Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8100’ is therefore not allowed access.

How can i resolve these error?

1 Like
2

Hi, @sabarinathen

You can pass the "withcredentials"parameter as true in your request string.

3

@addwebsolution could you please explain how to pass the credential parameter
Initially i do these

function()
{
 var headers = new Headers();
    headers.append('Access-Control-Allow-Origin' , '*');
    headers.append('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT');
    headers.append('Accept','application/json');
    headers.append('content-type','application/json');
     let options = new RequestOptions({ headers:headers});

return this.http.post(this.url, postParams, options).do( res => console.log(res)); 

}

postParams is parameter that i was passed

4

@sabarinathen

function()
{
 var headers = new Headers();
    headers.append('Access-Control-Allow-Origin' , '*');
    headers.append('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT');
    headers.append('Accept','application/json');
    headers.append('content-type','application/json');
     let options = new RequestOptions({ headers:headers,withCredentials: true});

return this.http.post(this.url, postParams, options).do( res => console.log(res)); 

}

Hope, this will solve your issue

5

Thank you @addwebsolution

res =&gt contains an error i followed res => console.log(res) with credentials included like above instruction

Error:
Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8100' is therefore not allowed access.

6

You could use chrome extension https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en to deal with CORS.

Though, you will not face CORS issue in mobile applications.

6 Likes
7

Thank you @jhaankit and @addwebsolution it solve my issues

8

How can i implement Access-control-allow-origin for ios mobile app.
I am using ionic 3 with wkWebvView.
There is no CORS problem with android and ionic serve. For ios it’s http post request error * No access control origin problem.
Note: I already add the chrome extension it’s working properly in ionic serve.
Anyone face this in Ionic 3 latest version

1 Like
9

You can implement cors according to this doc.

And if you can’t implement the cors, you can use this plugin for your http requests.

10

How to implement cors in our app.

1 Like
11

Just want to make sure that you know that these headers don’t work client side. the server/service has to use these header in their response.

In my situation i had to create a proxy on my server that called the remote REST api.

2 Likes
12

If none of those solution works for you, try this:

First close all your chrome pages.

Then run the following command on your Mac OS X

open -a Google\ Chrome --args --disable-web-security --user-data-dir

Continue debugging your Ionic 3 app as you normally do:

ionic serve

(https://noobfornoob.wordpress.com/2017/11/23/angular5-ionic-3-httpclient-cors-issue-solution/)

3 Likes
13

open -a Google\ Chrome --args --disable-web-security --user-data-dir
It works for me , thank you very much!!!

14

Thanks a lot jhaankit

15

Thanks a lot for the tweak :kissing_heart:

16

Thank you @sabarinathen!

17

The above trick you can solved in chrome but in device you can sort using below code that I have solved by adding headers like below … in ionic 3
define header…

import { Http,Headers } from ‘@angular/http’;

then…

var headers = new Headers();
headers.append(‘Content-Type’, ‘application/x-www-form-urlencoded; charset=UTF-8’);

then…
this.http.post(url, ‘post’), data,{headers:headers}).catch(err => {
reject(‘error’);
return Observable.throw(err);
}).map(res => res.json()).subscribe(data => {
if (data) {

    }

});

2 Likes
18

The previous extension its not working anymore, If help to anybody, just use this extension for google chrome, on builded apps you don’t need to do anything, its a simple toggle that you can set on/off: https://chrome.google.com/webstore/detail/cors-toggle/jioikioepegflmdnbocfhgmpmopmjkim

19

In which file I should write these codes?

20

Can please tell me where do I add these codes?