Testing app locally in the browser?

Asked

Viewed 8,587 times

2

I am trying to develop a hybrid application using Ionic and Angularjs and for that I am testing in the browser.

When I do ionic serve it creates a local server with the address localhost:8100/#/main and my webservice tbm is on the localhost at port 80.

When I try to do some ajax requisicao for this webservice Firefox returns me the message:

Blocked cross-origin request: Same Origin Policy (Same Origin Policy) prevents reading the remote resource at http://localhost/AppPanel/users/doLogin.json. (Reason: CORS header 'Access-Control-Allow-Origin' is not present).`

I tried to disable this scan in Firefox this way: about:config -> security.fileuri.strict_origin_policy -> false but I haven’t gotten any results yet. I did my webservice on Cakephp.

How to solve this problem?

angularjs cakephp ionic firefox
  • 1

    @Bacco I am trying here, as soon as I can (if I can) put the answer. If I can’t create a virtual machine. thanks

  • 1

    You have implemented CORS in your API ?

  • Where is your service located and your front-end ? Are in the same directory or different directories?

  • @Felippetadeu the Frond-end(browser app) and the back-end(webservice) are all on the localhost.

  • solved problem. I added the parameters to the Chrome shortcut --args --allow-file-access-from-files --disable-web-security and now it’s working. Thank you all.

1 answer

1

You bypassed the security of the app and backend by disabling CORS. To configure CORS on client and server (in development environment) I do this:

index.html:

<meta http-equiv="Content-Security-Policy"
        content="default-src *;
               script-src 'self' 'unsafe-inline' 'unsafe-eval'
                           127.0.0.1:*
                           http://*.gstatic.com          
                           http://*.googleapis.com
                           https://*.gstatic.com
                           https://*.googleapis.com
                           ;
               style-src  'self' 'unsafe-inline'
                           127.0.0.1
                           http://*.gstatic.com         
                           http://*.googleapis.com
                           https://*.gstatic.com
                           https://*.googleapis.com
    ">

in your backend, Set the headers to accept the 127.0.0.1 source (example in Rubyonrails): 

def set_headers    #este é um before_filter no controller
    if request.env['HTTP_ORIGIN'] and request.env['HTTP_ORIGIN'].match(/^http:\/\/127\.0\.0\.1/)
        headers['Access-Control-Allow-Origin'] = '*'
        headers['Access-Control-Allow-Methods'] = 'GET' #'POST, PUT, DELETE, GET, OPTIONS'
        headers['Access-Control-Request-Method'] = '*'
        headers['Access-Control-Allow-Headers'] = 'Origin' #'Origin, X-Requested-With, Content-Type, Accept, Authorization'
        puts "PERMITINDO CORS PARA ORIGIN: #{request.env['HTTP_ORIGIN']}"
    else
        #puts "HTTP_ORIGIN é nil => REQUEST.ENV => #{request.env}"
    end
end

You should serve the app like this:

ionic serve --address 127.0.0.1

Browser other questions tagged angularjs cakephp ionic firefox

You are not signed in. Login or sign up in order to post.