Невозможно POST кросс-домен данных в приложении Angular

0

EDIT: проблема решена. Мой код переднего конца хорош, это ошибка задних парней.

У меня проблема при перекрестном доступе данных POST. Я не знаю, почему, всего 3 часа назад, он работал нормально. В то время я только что внес некоторые изменения в CSS и HTML, я не касался какого-либо JS файла. Я также попросил команду Back end (они используют Ruby on Rails), и они сказали мне, что они все еще работают на localhost.
Эта ошибка появляется каждый раз, когда я пытаюсь выполнить POST на сервере при использовании Firefox и Chrome:

XMLHttpRequest cannot load https://time-traveler-back.herokuapp.com/api/sessions/login. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:9000' is therefore not allowed access. The response had HTTP status code 503. 

Для Chrome я уже установил приложение CORS. Но если я включил его, появится еще одна ошибка:

XMLHttpRequest cannot load https://time-traveler-back.herokuapp.com/api/sessions/login. A wildcard '*' cannot be used in the 'Access-Control-Allow-Origin' header when the credentials flag is true. Origin 'http://localhost:9000' is therefore not allowed access.

Вот моя конфигурация приложения:

// Config for POST data cross domain
app.config(['$routeProvider', '$httpProvider', function($routeProvider, $httpProvider) {
    $httpProvider.defaults.useXDomain = true;
    $httpProvider.defaults.withCredentials = true;
    delete $httpProvider.defaults.headers.common["X-Requested-With"];
    $httpProvider.defaults.headers.common["Accept"] = "application/json";
    $httpProvider.defaults.headers.common["Content-Type"] = "application/json";
}]);

Вот как я получаю данные POST:

var apiUrl = 'https://time-traveler-back.herokuapp.com/api/';
$http({
    method: 'POST',
    url: apiUrl + 'sessions/login',
    data: $.param(formData), // pass in data as strings
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    } // set the headers so angular passing info as form data (not request payload)
})
.then(function successCallback(response) {
    // my stuffs
}, function errorCallback(response) {
    // my stuffs
});

Пожалуйста, помогите мне. Благодарю.

2 ответа

1

Учетные данные и CORS

Одно замечание при использовании withCredentials: true в вашем приложении и настройка сервера для CORS заключается в том, что у вас может не быть заголовок Access-Control-Allow-Origin, установленный на '*'. Он должен быть настроен на несколько исходных кодов. Если вы абсолютно должны иметь этот набор в *, то я предлагаю сделать что-то помимо проверки подлинности на основе файлов cookie, таких как аутентификация на основе токенов.

См. Аутентификация AngularJS и CORS

  • 0
    Спасибо за ваш ответ, однако, я все еще не понял вашу идею.
  • 0
    Какую часть вы не поняли? Либо вы определяете свой сервер для возврата списка разрешенных клиентов вместо * (все), либо вы используете другой процесс аутентификации.
Показать ещё 1 комментарий
0

Похож на стандартную ошибку CORS.

Вы уже исправили, но в случае сомнений я дам несколько рекомендаций:


Rack-CORS

Если вы используете рельсы в качестве бэкэнд, вы обязательно должны проверить драгоценный камень rack-cors. Это в основном устанавливает все политики CORS для вашего сервера через промежуточное ПО самым простым способом:

#config/application.rb
   ...
   config.middleware.insert_before 0, "Rack::Cors" do
      allow do
        origins '*'
        resource '*', headers: :any, methods: [:get, :post, :options]
      end
    end

Это позволяет разрешить определенным доменам "происхождение" и методы для вашего приложения.

-

Вы также должны помнить, что для предотвращения запросов на междоменные XML-запросы было назначено "CORS" (совместное использование ресурсов Cross Origin) для применения "блокировки", по которой ресурсы/URL-адреса доступны для запросов JS.

Как правило, если вы когда-либо используете JS для автоматического обновления front-end с помощью XML-запроса отдельного домена (а не только Ajax), вам необходимо разрешить домен в вашей политике CORS вашего сервера.

Существует несколько способов сделать это; Простейшим с рельсами является использование rack-CORS (как указано выше).

  • 1
    Спасибо за вашу помощь. Я вернусь сюда, если я получу эту ошибку в будущем.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню