CORS Issues (IONIC 3)

Question

I’m trying to handle with CORS issues in livereload mode, but I wasn’t able to find a reasonable solution for that. My backend was developed in Java and it’s running on localhost.

Command:

ionic cordova emulate ios -l -c -s --address 127.0.0.1

ion.config.json:

{
  "name": "Smartmarket",
  "app_id": "",
  "type": "ionic-angular",
  "integrations": {
    "cordova": {}
  },
  "proxies": [{
        "path": "/SmartmarketWeb/endpoint",
        "proxyUrl": "http://127.0.0.1:8080/SmartmarketWeb/endpoint"
  }]
}

Request example:

let headers = new Headers({ 
    'Content-Type': 'application/json'
});
let options = new RequestOptions({ headers: headers });
return this.http.post('http://127.0.0.1:8080/SmartmarketWeb/endpoint/login', json, options)
    .timeout(TIMEOUT_REQUEST*1000)
    .map(this.extractData)
    .do(this.logResponse)
    .catch(this.handleError);

Error:

Can anyone help me, please? I’ve tried to follow many solutions, however, none of them had an effect.

Its your server side not your client side that should be specifying the CORS headers — Liam, Aug 31 '17 at 12:26
@Liam Thank you for your answer, but how does It work properly without using the livereload mode (in IOS simulator and real device)? — Pedro Durek, Aug 31 '17 at 12:37
As @Liam points out the client side is not the place to specify the CORS headers. So you need to remove `'Access-Control-Allow-Origin': '*', 'Access-Control-Allow-Methods': 'GET, POST, OPTIONS', 'Access-Control-Allow-Credentials': true, 'Access-Control-Allow-Headers': 'origin, content-type, accept'` from your request code. Adding those in your frontend JavaScript code isn’t going to have any effect other than to break things even further — sideshowbarker, Aug 31 '17 at 13:43
You were right, I applied the solution on the server side and it worked indeed. — Pedro Durek, Sep 01 '17 at 03:22

score 1 · Answer 1 · answered Nov 29 '17 at 14:21

Workaround only - Not a perfect solution

I was running with the same problem, My ionic 3 app with ASP.net backend was working just fine, it was not working with IOS ( Iphone x - IoS 11 simulator ).

Solution

I changed the web view option of my ionic app.

First, open config.xml and add the following properties

<feature name="CDVWKWebViewEngine"> <param name="ios-package" value="CDVWKWebViewEngine" /> </feature> <preference name="CordovaWebViewEngine" value="CDVWKWebViewEngine" />

Then remove all plugins and platforms then run or build your app

Detailed steps given in this url

this is recommended solution. use native plugin – Khurshid Ansari Sep 24 '19 at 19:01 — Khurshid Ansari, Sep 24 '19 at 19:01

score 0 · Answer 2 · answered Sep 01 '17 at 03:31

The problem was on the server side. Follow the solution below (Java - Jersey 2):

Filter class:

@Provider
public class CORSResponseFilter implements ContainerResponseFilter {

    @Override
    public void filter(ContainerRequestContext requestContext, ContainerResponseContext responseContext) throws IOException {

        MultivaluedMap<String, Object> headers = responseContext.getHeaders();

        headers.add("Access-Control-Allow-Origin", "*");    
        headers.add("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT");          
        headers.add("Access-Control-Allow-Headers", "origin, content-type, accept, authorization");
        headers.add("Access-Control-Allow-Credentials", "true");


    }

}

web.xml:

<servlet>
    <servlet-name>Endpoint</servlet-name>
    <servlet-class>org.glassfish.jersey.servlet.ServletContainer</servlet-class>
    <init-param>
        <param-name>jersey.config.server.provider.packages</param-name>
        <param-value>com.smartmarket.endpoint</param-value>
    </init-param>
    <init-param>
            <param-name>jersey.config.server.provider.classnames</param-name>
            <param-value>com.smartmarket.filter.CORSResponseFilter</param-value>
    </init-param>
    <load-on-startup>1</load-on-startup>
</servlet>

Khurshid Ansari · Answer 3 · 2019-12-16T13:00:40.090

0

Best solution:

Option 1)

For ionic v2 or v3 : https://ionicframework.com/docs/v3/native/http/

For cordova/phonegap : https://github.com/silkimen/cordova-plugin-advanced-http

Option 2)

Enable CORS on server.

edited Dec 16 '19 at 13:00

answered Sep 24 '19 at 19:04

Khurshid Ansari

4,638
2
33
52

CORS Issues (IONIC 3)

3 Answers3

Solution

Linked