Ошибка в Access-Control-Allow-Origin при угловом запросе к Rails

Question

Я использую Angular 2, чтобы сделать запрос API(rails). Когда я делаю http-запрос через angular, я получаю следующую ошибку: XMLHttpRequest не может загрузить https://api-url/. Ответ на запрос предварительной проверки не проходит проверку контроля доступа: в запрошенном ресурсе отсутствует заголовок "Access-Control-Allow-Origin". Источник ' http://localhost:4200/', следовательно, не имеет доступа. Ответ имел HTTP-код состояния 404. Однако, если я пытаюсь сделать запрос через Postman или сам браузер, я не получаю никакой ошибки. Данные отображаются нормально угловым кодом:

makeRequest() {
  let user = {"user": "user", "password": "password"};
  let headers: Headers = new Headers();
  headers.append('Authorization', 'Basic ' + btoa(user.user + ':'+user.password));
  headers.append('Content-Type', 'application/vn.api+json')
  let this.http.get(api-url, {headers: headers}).map(res => res.json()).subscribe(data => {
  this.data = data;
  })
 }

На моем сервере rails я использовал gem 'jsonapi-resources', чтобы открыть AP. В моем контроллере API у меня есть этот код для проверки подлинности и установки заголовков для запросов:

module Api
  class ApiController < JSONAPI::ResourceController
    prepend_before_action :set_headers, :authenticate

    def context
      { current_station: @user }
    end

    private

    def authenticate
      authenticate_or_request_with_http_basic do |token, _|
      @user = User.where(api_key: token).first
      end
    end

    def set_headers
      response.headers["Access-Control-Allow-Origin"] = "*"
    end
  end
end

Когда я делаю запрос в браузере или использую postaman, заголовок появляется нормально, но в Angular у меня есть ошибка.

Answer 1

Это из-за CORS. Короче говоря, браузеры по умолчанию запрещают одному домену ( http://localhost:4200/) отправлять запросы AJAX другому ( http://api-url/). Он работает в "почтальоне", потому что это расширение, а затем CORS не применяется. Если вы хотите решить эту проблему, вы должны настроить свой сервер так, чтобы он возвращал определенный заголовок, сообщающий клиенту, что он разрешает соединение CORS.

Фактически, когда веб-сайт пытается сделать запрос AJAX на другой домен, он сначала отправляет OPTION просьба спросить, какие домены разрешены. Этот список возвращается сервером через заголовок Access-Control-Allow-Origin, Например, он может содержать звездочку ("*"), чтобы указать, что любой может сделать AJAX-вызов на этот сервер. Если этот заголовок позволяет вашему клиенту совершать вызов AJAX, ваш фактический запрос будет выполнен, в противном случае вы получите ошибку (вероятно, ту, которую вы получаете в настоящее время)