Cross domain ionic serve

ionic-v1
1

Hi,

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:

Imgur
Imgur980×393 49.1 KB

Can you help me?

2

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:
http://enable-cors.org/server_nginx.html

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 simple-cors-http-server.py (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', '*')
        SimpleHTTPRequestHandler.end_headers(self)

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

Then you can do python simple-cors-http-server.py 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.

3

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

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

1 Like