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

Question

我正在尝试使用我的 Angular 服务中的以下代码将 POST 请求从我的 Angular2 ( http://localhost:3000 ) 应用程序发送到 Rails API url ( POST http://localhost:3003/api/users )。

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());
}

当我通过 angular 2 应用程序将此请求发送到我的 api 时，我在浏览器控制台上收到以下错误。

跨域请求被阻止：同源策略不允许读取位于http://localhost:3003/api/users的远程资源。 （原因：缺少 CORS 标头“Access-Control-Allow-Origin”）。

我需要做哪些工作来克服这个问题？ GET 方法也会出现同样的问题，但在 rails app/controllers/application_controller.rb上添加以下标题可以解决这个问题。 但是，我无法克服 POST 请求的问题

after_filter :set_access_control_headers

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

Answer 1

您应该添加这些标题来解决这个问题：

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

如果在请求标头中发送，则在headers['Access-Control-Allow-Headers']添加更多标头。

为响应头添加这个，

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

Answer 2

您应该使用rack-cors来克服这个跨域问题并将客户端列入白名单（允许）。

仅出于开发目的，您可以允许所有请求。

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

Answer 3

确保您已添加扩展 CORS 并启用它。 供参考：查看这里

在项目根目录创建一个名为 proxy.conf.json 的文件，将以下内容粘贴到文件中： { "/api": { "target": "your API URL", "secure": false } } 运行 cmd 为： - ng serve --proxy-config proxy.conf.json