Cross domain ionic serve


I have a back-end API flask python running on my localhost:3000. I want to try my backend with an ionic app also running on my localhost:8100 but it doesn’t work… My app is tested with ionic serve.

My app config looks like this:

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'];
  $httpProvider.defaults.headers.common['Content-Type'] = 'application/json';

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

My Chrome console returns this:

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

Headers informations:

Can you help me?

i think you need to configure the cors also in the server, what web serveris it? with python is in production is recommended to use some good web server like gunicorn, or uwsgi, behind an nginx. As you already would know.

Seems you can enable then with nginx like this in a quick search:

If you are running it as development with command line python … simplehttpserver you can see how to enable it here, maybe it helps:

github enable simplehttp cors

stackoverflow post about it

the second post(taken from above link):

Simply create a file (or whatever) and put the following inside:

#! /usr/bin/env python2
from SimpleHTTPServer import SimpleHTTPRequestHandler
import BaseHTTPServer

class CORSRequestHandler (SimpleHTTPRequestHandler):
    def end_headers (self):
        self.send_header('Access-Control-Allow-Origin', '*')

if __name__ == '__main__':
    BaseHTTPServer.test(CORSRequestHandler, BaseHTTPServer.HTTPServer)

Then you can do python and it will launch your modified server which will set the CORS header for every response.

if you only need to consult and its json, you can also use jsonp, or run it in android to circunvent that.

for developing on os x you can use google chrome with --disable-web-security

open -a Google\ Chrome --args --disable-web-security

1 Like