Question

我正在尝试将我的Angular2（http://localhost:3000）应用中的POST请求发送到Rails API网址（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

您应该使用Console来克服此跨域问题并将客户端列入白名单（<允许）。

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

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并启用它。以供参考： Check here

在项目的根目录下创建名为proxy.conf.json的文件将以下内容粘贴到文件中：{＆＃34; / api＆＃34;：{＆＃34; target＆＃34;：“您的API网址”，＆＃34;安全＆＃34;：false}} 运行cmd为： - ng serve --proxy-config proxy.conf.json

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

3 个答案: