How to do proxy to avoid CORS for ionic2 apps?

Ionic Framework ionic-v3
1

I see this blog post here.
http://blog.ionic.io/handling-cors-issues-in-ionic/

but doing the same doesnt work for me.
I tried ionic.project and also doing the same in ionic.config.json

But my main problem is not CORS alone, I used a chrome plugin to solve it.
But when i send headers which has authorization in it the brower sends OPTIONS pre-flight which is not handled in the third party server i am using. Not sure how to get through this,

Thanks , any help would be appreciated.

1 Like
2

Try to use chrome with --disable-web-security

you will find many articles on how to disable-web-security of chrome for only development purpose…

assuming you are using MAC machine…
try this command on terminal…

open -n -a “Google Chrome” --args --user-data-dir=/tmp/temp_chrome_user_data_dir_for_cordova http://localhost:8100/ --disable-web-security

which opens another instance of chrome with disabled security and there is no CORS issue any more… as per I know this command will not hamper your original chrome’s security…

3

i am using windows… couldn’t really find an option. So wondering if I could build and deploy as an app.

4

This link might help you to disable web security of chrome on Windows machine.
Read the first comment on this link.

And another thing is if you facing CORS issue io browser, first try to deploy the app on a real device. Most probably it works fine on a real device. This happens only because of browser’s security settings it avoids you for CORS.

Firstly check whether your code working on a real device. If it works properly then create another instance of chrome with disabled security following above stackoverflow post…

2 Likes
5

For some reason it is not working in real device as well. Not sure how to debug with real device since my ionic cli is not detecting the device to run directly in it and debug.

6

this worked perfectly… thanks a lot

7

Great. Glad this solution work for you.

Happy Coding :wink:

8

This is not a solution. Disabling CORS is like removing the headlight from your car when it breaks. Cors do exist for a reason. While development use a proxy to your API. It is very simple, just add 2 lines to your config.

ionic.config.json:

{
  "name": "client",
  "app_id": "",
  "v2": true,
  "typescript": true,
  "proxies": [
    {
      "path": "/api",
      "proxyUrl": "http://someRemoteApi.com/api/v2/"
    }
  ]
}

See this blog post for detailed information and an example on how to verify that the proxy works:

1 Like
9

CanKattw that’s not a very accurate analogy… When testing in the browser disabling CORS actually allows you to test complex API calls including Auth & other necessary headers. Ionic Proxy is very limiting. Using Chrome like so:

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

Allows you to simulate Ionic View’s CORS policy (none).

2 Likes
10

Go one step further, think about adding a web platform and deploying it to browsers, or serving it as mobile version of your website accessible via http:// in browser, a progressive webapp or how about electron?

If your use case is really so limited okay, go ahead turn CORS off in browser, but as a reply in a public forum it is insufficient without adding some notes about the limitation of your approach.