跨域請求被阻止：將 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