Angular с Rails API: «Не удалось загрузить ресурс: сервер ответил со статусом 401 (не авторизован)»

Question

Итак, я развернул приложение Angular 5 с бэкэндом Rails 5.Я могу обеспечить правильную передачу данных между ними локально, но при попытке подключиться к развернутой версии API (которая есть в Heroku) я сталкиваюсь с некоторой проблемой авторизации.Ошибка:

Failed to load https://my_api.herokuapp.com/data.json: No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:4200' is therefore not allowed access.
The response had HTTP status code 404.

Cross-Origin Read Blocking (CORB) blocked cross-origin response <URL> with MIME type application/json. 
See <URL> for more details.

Это то, что мне нужно изменить в Rails API или в Angular?Развернутый Rails API по сути такой же, как и в локальной версии, поэтому я не уверен, откуда исходит разъединение.

В Angular есть только две ссылки на API.Я подключаюсь к нему так же, как к локальному серверу:

Angular, app-module.ts

  providers: [Angular2TokenService, AuthService, AuthGuard,
    // {provide: 'api', useValue: 'http://localhost:3000/'}
    {provide: 'api', useValue: 'https://my_ api.herokuapp.com/data.json'}
  ]

Возможно, я использую Angular2TokenService?

Угловой, environment.ts:

export const environment = {
  production: false,
  token_auth_config: {
  // apiBase: 'http://localhost:3000'
  apiBase: 'https://my_api.herokuapp.com/data.json'
}};

Спасибо!Дайте мне знать о любых ваших предложениях или если вам нужны разъяснения.

Answer 1

Это проблема с CORS (кросс-источник-совместное использование ресурсов). Вы можете справиться с этим, добавив обратный вызов в свой API, как показано ниже:

def cors_set_access_control_headers
 headers['Access-Control-Allow-Origin'] = ENV['SERVER_URL'] || '*'
end

где SERVER_URL - URL-адрес вашего сервера переднего плана

В противном случае вы можете использовать gem 'rack-cors', как предложено в комментариях @Kedarnag Mukanahallipatna