Ruby on rails 跨源请求被阻止：从Angular2应用程序向Rails API发送POST请求时

我正在尝试从我的Angular2发送POST请求（

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时，我在浏览器控制台上遇到以下错误

已阻止跨源请求：同一源策略不允许读取 位于的远程资源。（理由：CORS 缺少标题“访问控制允许原点”）

我需要做什么工作来克服这个问题？GET方法也会出现同样的问题，但是在rails

app/controllers/application\u 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

您应该添加以下标题以解决此问题：

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

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

为响应标题添加此选项

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

您应该使用来克服这个跨源问题，并将客户端列入白名单（允许）

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

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

确保您已添加扩展COR并启用它。供参考：

在项目根目录下创建一个名为proxy.conf.json的文件
在文件中粘贴以下内容：{“/api”：{“target”：“您的api URL”，“secure”：false}
运行cmd as:-ng serve--proxy config proxy.conf.json
谢谢您的快速回复。当我添加您建议的标题时。我在浏览器控制台上遇到相同的错误。由于您没有发送响应头，因此此问题仍然存在。。我已经更新了我的答案，很抱歉要问。我不熟悉rails。如何发送此响应。headers['Access-Control-Allow-Origin']='*'请告诉我需要添加此响应的文件。您可以使用另一个函数来响应headersFYI，我使用的是rails 5.0.0.1.Ya。这是工作。让我知道我应该在生产环境中做什么。谢谢你的盛情款待hand@NifrasIsmail这取决于您：您可以只列出（允许）您想要响应的地址，或者响应生产中的所有来源。