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
});
Пожалуйста, помогите мне. Благодарю.
Учетные данные и CORS
Одно замечание при использовании withCredentials: true в вашем приложении и настройка сервера для CORS заключается в том, что у вас может не быть заголовок Access-Control-Allow-Origin, установленный на '*'. Он должен быть настроен на несколько исходных кодов. Если вы абсолютно должны иметь этот набор в *, то я предлагаю сделать что-то помимо проверки подлинности на основе файлов cookie, таких как аутентификация на основе токенов.
Похож на стандартную ошибку 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
(как указано выше).
*
(все), либо вы используете другой процесс аутентификации.