[SOLVED] CORS with Ionic

I have a back-end with an API Flask Python. The server config is ready and I can test this. But when I launch ionic serve, I have some errors when my request returns. Here my configuration in my app.js:

app.config(function($stateProvider, $urlRouterProvider, $httpProvider) {
  // Enable cross domain calls
  $httpProvider.defaults.useXDomain = true;

  // Remove the header used to identify ajax call  that would prevent CORS from working
  delete $httpProvider.defaults.headers.common['X-Requested-With'];

  // Set api token
  if(typeof API_TOKEN !== 'undefined') {
    $httpProvider.defaults.headers.common['Authentication-Token'] = API_TOKEN;
  }

I have this error on my browser console:

XMLHttpRequest cannot load http://localhost:3000/api/lists. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http://localhost:8100’ is therefore not allowed access.

Can you help me?

1 Like

if your code is correct the app should work just fine on the device but if you want to disable CORS when your on your PC you need to follow the next steps:

  1. Create Chrome shortcut
  2. right click > shortcut > Target: and enter at the end of the shortcut --disable-web-security
    for example: e\Application\chrome.exe" --disable-web-security
    3)close all chrome apps and chrome proccess(from the task managaer)

when you open the new chrome shortcut you will have a yellow warning says that web security is disabled.

CORS is something that is enabled on the server. you have to make sure that the headers that are sent by the queried server have

Access-Control-Allow-Origin *; (for nginx)

Once that is done, the issue should be resolved. The XML request is being blocked in your case, because these headers are not present in the server response.

More info can be found here, http://www.w3.org/wiki/CORS_Enabled

1 Like

In general @brokurt is right. In production you should enable it on your server side.
But during development the chrome startup parameter @Matangub described should do what you want.
And if you only want to test get request -> use could use JSONP Requests.

Greetz, bengtler.

I try your solution, but it doesn’t work on my Safari :frowning:

But it’s work on chrome ! :smile:

For Mac users: open /Applications/Google\ Chrome.app/ --args --disable-web-security

1 Like

Yeah matangub posted this for chrome… so it will work for chrome and not for safari
Different browsers -> different behave and different customizable app parameters.

Greetz.

Here’s a tips:

  1. download chrome canary (like chrome beta)
  2. open terminal and do:
  3. nano ~/.bash_profile
  4. navigate to a new line and add: alias corsdev=’open -n -a /Applications/Google\ Chrome\ Canary.app/Contents/MacOS/Google\ Chrome\ Canary --args --disable-web-security’
  5. ctrl-o (saves the file)
  6. enter
  7. ctrl-x
  8. restart the terminal

Now if you open terminal and do corsdev it will open Chrome Canary with the disable-web-security-flag and you’ll be able to do cross origin requests (cors)!

You could of course do this with the ordinary chrome, but if you disable web-security it becomes unsafe, so it might not be so wise…
I instad use Canary for dev and do my googling safely in the ordinary chrome.

(anyone know a way of open a new instance of chrome? then you wont need canary)

1 Like

@tobbe if there is the need to start chrome over terminal, you might simply type in (if there is the alias chrome, but it should be there for unix systems):
google-chrome --disable-web-security

No need to configure env-variables and bash profile for no effect.

Yes, but I want to open Canary so my ordinary chrome is still safe. And I would never remember all those letters so I make an alias :stuck_out_tongue:

in some cases, you may not able to use chrome disable flag.
So, you can try to use chrome extension as workaround in your development phase.

try it:

2 Likes

Best thing in the universe is to use

ionic serve --lab

and temporarily allow CORS from the server
e.g. nginx example

location /{
 add_header 'Access-Control-Allow-Origin' *;
}
3 Likes

@divyenduz is the ionic serve --lab is working.I could not see any changes .I still taking into the browser when I using this command.

It beta 13 yes. It was releases less than 24 hours ago I think.

ionic cli v1.2.13 allows you to setup a proxy to solve CORS issues as well. It is documented in the readme on github.

@divyenduz How or where would you make that location change to add the header? That looks like an interesting solution as well.

That solution is for nginx only. nginx has a location directive, under which you can write the following code.
Make/test your app and then remove it before production :smile:

location /{
 add_header 'Access-Control-Allow-Origin' *;
}

Similarly, there would be a way to allow it from apache.

If somebody needed to enable this from PHP here it is:

<?
header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
?>

There’s also a way by using .htaccess

Cheers,
Rafal

I’m able to do $http calls, but linking from index.html from myserver.com I get this error, still.

I mean it isn’t working on iOS phone and emulator, not just in the browser.

What else might be wrong?

Maybe good to use corsproxy for testing in browser or ionic.project file setup?
Works without .htaccess modifications.
Check here: Making REST call from Ionic

I too would recommend enabling CORs on the API website, in ASP.NET you can add to web.config:

<system.webServer>
  <httpProtocol>
    <customHeaders>
      <add name="Access-Control-Allow-Origin" value="*" />
      <add name="Access-Control-Allow-Headers" value="Content-Type" />
      <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
    </customHeaders>
  </httpProtocol>
<system.webServer>

Another thing you can do is use Coherence. It makes you custom Chrome apps, which can be used for single sites or projects. Make a new one and disable security on that one, so you don’t have to worry about it with your main Chrome.