跨域请求被阻止：将 POST 请求从 Angular2 应用程序发送到 Rails API

Question

I'm trying to send the POST request from my Angular2 ( http://localhost:3000 ) app to Rails API url ( POST http://localhost:3003/api/users ) with the following code in my angular service.

createNewUser(){
//var params = JSON.stringify({ user:{ first_name: 'Nifras', last_name: 'Ismail', email: 'nifrasismail@gmail.com', contact_number: '+94778990300', user_name: 'nifrasismail', password: 'sdkjnfnsdj'}});
var params = JSON.stringify({
  "first_name":"Nifras"
});
var headers = new Headers();

headers.append('Content-Type','application/json');

return this.http.post('http://localhost:3003/api/users',params, {headers : headers})
  .map(res => res.json());
}

While I am sending this request to my api via angular 2 application, I get the following error on browser console.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:3003/api/users . (Reason: CORS header 'Access-Control-Allow-Origin' missing).

What is the work I need to do to overcome this issue? The same problem arises for GET method too but adding the following header on rails app/controllers/application_controller.rb overcome this issue. However, I could not overcome the issue for POST request

after_filter :set_access_control_headers

def set_access_control_headers
    headers['Access-Control-Allow-Origin'] = '*'
    headers['Access-Control-Request-Method'] = '*'
  end

Answer 1

You should add these headers to overcome this problem:

after_filter :set_access_control_headers

       def set_access_control_headers

             response.headers['Access-Control-Allow-Origin'] = '*'          
             header['Content-Type'] = 'application/json'
             headers['Access-Control-Allow-Origin'] = '*'
             headers['Access-Control-Allow-Methods'] = 'POST, PUT, DELETE, GET, OPTIONS'
             headers['Access-Control-Request-Method'] = '*'
             headers['Access-Control-Allow-Headers'] = 'Origin, X-Requested-With, Content-Type, Accept, Authorization'
       end

Add more headers in headers['Access-Control-Allow-Headers'] if sends in the request headers.

Add this for response headers,

response.headers['Access-Control-Allow-Origin'] = '*'

Answer 2

You should use rack-cors to overcome this cross-origin issue and whitelist (allow) the clients.

For development only purpose you could allow all the requests.

config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins '*'
    resource '*', headers: :any, methods: [:get, :post, :options, :put, :delete]
  end
end

Answer 3

Make sure if you have added extension CORS and enable it. For reference: Check here

Create a file named as proxy.conf.json at the root of the project Paste following in the file: { "/api": { "target": “your API URL”, "secure": false } } Run cmd as:- ng serve --proxy-config proxy.conf.json