首页 文章

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

提问于
浏览 次
2

我正在尝试使用我的角度服务中的以下代码将我的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 Headers 'Access-Control-Allow-Origin'） .

我需要做些什么才能克服这个问题？同样的问题也出现在GET方法中，但在rails app/controllers/application_controller.rb 上添加以下 Headers 可以克服这个问题 . 但是，我无法解决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

3 回答

  • 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
    回复于
  • 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'] = '*'
    回复于
  • 0

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

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

    回复于

相关问题