Axios: Axios vs jQuery post CORS проблема

Какую ошибку вы получаете?

XMLHttpRequest cannot load http://example/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://example.dev' is therefore not allowed access. The response had HTTP status code 404.

jQuery отправляет что-то, чего нет в Axios? Заголовки или предполетная проверка?

Какой браузер вы используете, когда получаете эту ошибку?

Хром 45

Вы попробуете сделать этот запрос из своего приложения и сообщить мне результат?

axios.get('https://api.github.com/users/benjamingeorge')
  .then(function (res) {
    console.log(res.data);
  })
  .catch(function(res) {
    if(res instanceof Error) {
      console.log(res.message);
    } else {
      console.log(res.data);
    }
  });

Извините за задержку. Я получаю обратно объект со всеми данными. Опять же, проблема заключается не в методах получения, а в методе POST.

+1

+1

Наткнулся на эту самую проблему. jQuery AJAX POST работает, POST Axios (и FWIW с изоморфной выборкой) не работают на этапе предпечатной проверки. Что еще более странно, если я «Копирую как cURL» оба запроса из вкладки сети инспектора Chrome, они идентичны!

У меня тоже была эта проблема, но теперь она работает, так как я просто неправильно настроил Access-Control-Allow-Origin на стороне сервера. Я подозреваю, что это есть и у остальных, потому что jquery POST отправляет запросы как application / x-www-form-urlencoded по умолчанию и, следовательно, не получает предварительного уведомления. Хотя axios правильно отправляет его как application / json и будет предварительно запущен.

: +1:

Я настраивал небольшой API для изучения Grails. Выполняя запрос POST, только переключившись с jQuery на Axios, я получил следующее:

к этому:

+1

Homyk -> Какую настройку CORS вы изменили на стороне сервера, чтобы правильно принимать application / json в предпечатной проверке с AXIOS? Вы можете объяснить? Например, я использую Tomcat и отправляю почтовые запросы «с учетными данными», а Axios у нас не работает.

peterpuzos -> Я использую встроенную Jetty, но эквивалент будет существовать для tomcat.

FilterHolder filter = новый FilterHolder ();
filter.setInitParameter ("allowedOrigins", "*");
filter.setInitParameter ("allowedMethods", "POST, GET, OPTIONS, PUT, DELETE, HEAD");
filter.setInitParameter ("allowCredentials", "true");
CrossOriginFilter corsFilter = новый CrossOriginFilter ();
filter.setFilter (corsFilter);

Параметр allowedOrigins должен иметь конкретный IP-адрес в prod.

Спасибо за совет. Нам действительно удалось заставить его работать после некоторой реконфигурации (удаление CXF из уравнения). Мы можем подтвердить, что это вообще не проблема AXIOS! Ваше здоровье!

+1

+1

+1

+1

+1

+1

Другой способ справиться с этим, особенно если он работал в jQuery

 var config = {
 заголовки: {
 'Content-Type': 'application / x-www-form-urlencoded'
 },
 params: {
 email_address: emailAddress
 }
 };
 axios.post (конечная точка, {}, конфигурация)
 .then (функция (ответ) {
 console.log (ответ);
 })
 .catch (функция (ответ) {
 console.log (ответ);
 });

Из комментария Homyk от 9 декабря 2015 года смог придумать это, и это сработало.

@leyume
все еще не работает, вы можете проверить это здесь, вызов OPTIONS выполняется, но вызов POST не выполняется
https://reduxapp.herokuapp.com/signin

@steelx удалось найти решение? У меня такая же проблема, OPTIONS успешно. но POST выдает ошибку.

РЕДАКТИРОВАТЬ: неважно, была проблема с подключением к БД

Потратил почти день на тестирование POST-запроса через Axios с неудачным результатом. JQuery работал прямо из коробки. После опробования всех предложенных настроек ни один из них не работал и не разочаровывал. Позже я сравнил данные, отправляемые Axios POST и jquery POST, и показал исходный формат в Chrome Dev Tool; jquery отправил данные в строке url fromat, т.е. x=1&y=10&z=abc... пока я отправлял данные через Axios как
json объект {x:1, y:10,z:"abc"} как показано в примерах. Позже я изменил его на строковый формат URL, и он просто сработал. Надеюсь, это кому-то поможет. Однако я не знаю, почему это сработало в первую очередь, поскольку все примеры в репозитории git показывают отправку объекта json в post requst.

Привет, @dhirajbasukala, у меня такая же проблема. Не могли бы вы опубликовать пример?

+1 проблема

@unuigbee , ниже приведен пример, который сработал для меня.
axios.post(url,'key1=value1&key2=value2',{withCredentials: true}) .then((res)=>{console.log(res)) .catch((res)=>{console.log(res))

где, как и ранее, отправляемый объект JSON не работал, как показано ниже:
axios.post(url,{"key1":"value1","key2":"value2"},{withCredentials: true}) .then((res)=>{console.log(res)) .catch((res)=>{console.log(res))

Я надеюсь, что это помогает.

@dhirajbasukala Спасибо, я попробовал, но это не сработало. Мне пришлось установить заголовки для Access-Control-Allow-Origin для всех (*) на моем сервере разработки. Я знаю, что это небезопасно, но мне пришлось это сделать для тестирования.

+1

возможно, вам нужно проверить, что сервер принимает тип содержимого, я использовал angular $ http из jquery.ajax, столкнулся с этой проблемой.
просто поставил вот так

$httpProvider.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded;charset=utf-8';

Тип содержимого по умолчанию jquery v1 - ' application / x-www-form-urlencoded; charset = utf-8 '

Я закрываю этот вопрос, так как это ожидаемое поведение. Мы рассматриваем возможность добавления нового параметра для автоматической настройки парсинга content-type и data , но это уже другая проблема.

@rubennorte Реализована ли эта автоматическая конфигурация?

@mzabriskie Будет ли аксиомов для определенных случаев использования. Заранее спасибо!

Я пробовал параметр типа "a = 3 & b = 4", он работает

+1

как сказал @leyume , если он работал с jquery, чем передача объекта конфигурации с заголовками
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },

исправил проблему для меня. Также не забудьте установить "Access-Control-Allow-Origin" = "*" на стороне сервера.

Я всю ночь пытался заставить работать аксиомы. Он всегда отправляет OPTIONS вместо POST, и моя конфигурация CORS игнорируется. Vue Resource мне подходит.

Vue.js 2 (спереди), Laravel 5.4 (api), Ubuntu (машина разработчика), Google Chrome и Firefox

HTTPS или HTTP? Здравствуйте, как мне общаться с помощью React axios. Точный
Запрос локального хоста: https: appmix: 3001
Сервер: http://cepaberto.com.br/api/v2/cep.json?cep=xxxxxxxxx

+1

+1

вы можете использовать qs для сериализации ваших данных
const qs = require('qs'); const data = qs.stringify({ data1: 'a', data2: 'a', data3: 'a', }); axios.get('host', data, { 'Accept': 'application/json', 'Content-Type': 'application/x-www-form-urlencoded', 'Access-Control-Allow-Origin':'*' })

+1

+1

+1

Привет,

Я просто хочу спросить, как мне это сделать в запросе на получение в CORS?
Кажется, он не работает, когда я пробовал это:

Но когда я использовал запрос на получение jquery, он позволяет мне получить доступ к api.

Спасибо.

@ Ethan0007 Поменяйте заголовок на:

заголовки: {"Content-Type": "application / x-www-form-urlencoded"},

В противном случае сервер / api должен будет принять application / json. См. Пример выше для исправления серверной части на причале:
https://github.com/axios/axios/issues/113#issuecomment -168160429