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

【问题标题】：Cross-Origin Request Blocked: While Sending the POST request from Angular2 Application to Rails API跨域请求被阻止：将 POST 请求从 Angular2 应用程序发送到 Rails API
【发布时间】：2017-02-26 05:43:25
【问题描述】：

我正在尝试使用我的 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

【问题讨论】：

标签： ruby-on-rails angular

【解决方案1】：

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

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

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

【讨论】：

是的。是工作。让我知道我应该在生产环境中做什么。谢谢你的好手
@NifrasIsmail 由您决定：您可以将您想要回复的地址列入白名单（允许）或回复所有起源于生产。

【解决方案2】：

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

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'] = '*'

【讨论】：

感谢您的快速回复。当我添加您建议的标题时。我在浏览器控制台上遇到了同样的错误。
因为你没有发送响应头，所以这个问题仍然存在。我更新了我的答案检查它
抱歉问。我是新来的铁路。我如何发送这个 response.headers['Access-Control-Allow-Origin'] = '*' 你能告诉我我需要添加哪个文件吗？
您可以使用其他函数来响应标头
仅供参考，我使用的是 rails 5.0.0.1。

【解决方案3】：

确保您是否添加了扩展 CORS 并启用它。以供参考： Check here

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

【讨论】：