CORS Issues

Ionic Framework ionic-v3
1

Hi, 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', 
	'Access-Control-Allow-Origin': '*',
	'Access-Control-Allow-Methods': 'GET, POST, OPTIONS',
	'Access-Control-Allow-Credentials': true,
	'Access-Control-Allow-Headers': 'origin, content-type, accept'
});
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:

09
092556×120 31.8 KB

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

2

can you tell me which backend save processing did you use?

3

With your proxy configuration this has to look like this:

return this.http.post('/SmartmarketWeb/login', json, options)

Because you replaced the remote http://127.0.0.1:8080/SmartmarketWeb/endpoint with a local /SmartmarketWeb.

(I prefer naming the “path” of a proxy /api or something similar but different to the actual URI)

4

I’m using Jersey Rest over Java, but It’s not an issue on the backend. When I emulate without using livereload mode, it works properly.

5

I’ve tried to change the path to /SmartmarketWeb/endpoint, but it’s still not working =/

6

What URL is it now requesting in the network tab?

7

Thank you for your support, in order to solve this problem, It was necessary to handle the CORS on the server side.