Cross Domain Scripting using Rest-Angular and rails

Question

I am building an application using Rest-Angular and Rails. Angular is running on localhost:9000 where as Rails on 3000. Due to some cross domain issues, i am not able to send POST request. I have already tried these things before posting :

1.) Used a rails gem to change the url as below

 config.middleware.use Rack::Cors do
    allow do
      origins 'localhost:9000'
      resource '*', :headers => :any, :methods => [:get, :post, :options, :delete]
    end
   end

2.) Change in request headers

baseAccounts.post(newAccount,{},{'Access-Control-Allow-Origin': '*',
            'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
            'Access-Control-Allow-Headers': 'accept,content-type,X-Token,programDigest'});

I am able to send GET request, but somehow POST is still not working.

Headers for my last try

Request URL:http://0.0.0.0:3000/singup
Request Headers
Provisional headers are shown
Accept:application/json, text/plain, */*
Access-Control-Allow-Headers:accept,content-type,X-Token,programDigest
Access-Control-Allow-Methods:GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Origin:*
Content-Type:application/json;charset=UTF-8
Origin:http://localhost:9000
Referer:http://localhost:9000/
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.125 Safari/537.36
Request Payloadview parsed
{"first_name":"Rajan","last_name":"Chaudhary","email":"[email protected]"}

and the error was

XMLHttpRequest cannot load http://0.0.0.0:3000/singup. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access.

why is your angular page not being served from your rails server to avoid this completely? — Claies
– Claies, Commented Aug 28, 2014 at 8:08

CodyMcCodeFace · Accepted Answer · 2014-08-28 08:06:39Z

This is called Cross-Origin-Resource-Sharing and it's a method to allow the sharing of data across different url origins (unsurprisingly). Browsers implement protection to stop cross-site-scripting (XSS) and this is the issue you're currently running into. More information can be found here: http://enable-cors.org

You're close to getting it to work. It's the server that needs to respond with the Access-Control-Allow-Origin: * header so that it will work.

Specifically each resource (every endpoint) needs to accept an OPTIONS request which responds with 200 OK and the following response headers (instead of allowing all methods you can specify only some allowed methods for a resource, for example GET only).

Minimum: Access-Control-Allow-Origin: *
Methods: Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS

Further information here

It's probably worth noting that this actually circumvents the whole point of the Cross Origin Resource Sharing protection that the browser and Angular are providing. Deployment sites should specify the exact allowed origin instead of *.

Collectives™ on Stack Overflow

Cross Domain Scripting using Rest-Angular and rails

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related