CORS with nginx not working with ionic run -l -c


#1

I can’t seem to get ionic (v1.0.1) to issue a cross origin request to my server running nginx. Just using curl to see what the options request looks like shows the Access-Control-Allow-Origin and other headers are coming across properly:

curl -i -X OPTIONS www.devapp.com/myroute/
HTTP/1.1 200 OK
Server: nginx/1.8.0
Date: Wed, 08 Jul 2015 13:37:08 GMT
Content-Type: text/html; charset=utf-8
Content-Length: 0
Connection: keep-alive
Allow: HEAD, OPTIONS, GET
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: OPTIONS,GET,PUT,POST,DELETE
Access-Control-Allow-Headers: X-FirePHP-Version,Accept,Origin,Referer,User-Agent,Content-Type 

However, when debugging when the app is on my device using livereload, i.e.

ionic run android -l -c 

I can’t make any requests to the server, and I’m getting cross-origin errors:

XMLHttpRequest cannot load http://www.devapp.com/myroute/. 
Origin http://192.168.1.14:8100 is not allowed by Access-Control-Allow-Origin. 

I’m not seeing any OPTIONS requests pre-flighted before the actual request is made either. Any idea how to fix this?


#2

Have you setup a proxy in your ionic.project file? Further info about this here: http://ionicframework.com/docs/cli/test.html

Service Proxies
The serve command can add some proxies to the http server. These proxies are useful if you are developing in the browser and you need to make calls to an external API. With this feature you can proxy request to the external api through the ionic http server preventing the No ‘Access-Control-Allow-Origin’ header is present on the requested resource error.

In the ionic.project file you can add a property with an array of proxies you want to add. The proxies are object with two properties:

path: string that will be matched against the beginning of the incoming request URL.
proxyUrl: a string with the url of where the proxied request should go.

{
  "name": "appname",
  "email": "",
  "app_id": "",
  "proxies": [
    {
      "path": "/v1",
      "proxyUrl": "https://api.instagram.com/v1"
    }
  ]
}

Using the above configuration, you can now make requests to your local server at http://localhost:8100/v1 to have it proxy out requests to https://api.instagram.com/v1


#3

I’d prefer to just get CORS working. I see no reason that it shouldn’t with the config that I’m using


#4

Also, I can’t use the proxy at the moment because it is not passing a session cookie through to the server. Apparently its an open bug.


#5

Which place to put this ?