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


#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?


#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.


The 'Access-Control-Allow-Origin' header has a value 'http://www.wunderground.com' that is not equal to the supplied origin. Origin 'http://localhost:8100' is therefore not allowed access
WKWebView CORS issue
#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


#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.


#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.


#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/)


#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) {

    }

});


#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?