Axios: не удается заставить работать межсайтовый POST

Кроме того, я также устанавливаю для параметра withCredentials значение true в конфигурации.

Я тоже столкнулся с этой проблемой, и, похоже, это происходит со мной только на Mac. Я потратил добрых 3 дня и ночи, пытаясь отладить свою сеть, и по прихоти решил попробовать это с помощью ванильного запроса XHR и понял, что проблема не в моей сети, а в axios.

Я тоже выполняю межсайтовые запросы с истинными учетными данными. Глядя на сетевой запрос, вы получаете ERR_EMPTY_RESPONSE, и это похоже на то, что запрос не удался, прежде чем он даже покинул браузер.

Это мой конфиг:

const myApi = axios.create({
  baseURL: 'http://someUrl/someEndpoint',
  timeout: 10000,
  withCredentials: true,
  transformRequest: [(data) => JSON.stringify(data.data)],
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json',
  }
});'

Если у меня будет возможность, я постараюсь разобраться в этом подробнее.

Ой, хорошо, я не сумасшедший. :) Пожалуйста, изучите это, если возможно.

Оказывается, моя проблема не связана с Axios. Cisco Anyconnect блокировала запросы опций с моего компьютера ... по какой-то причине?

Междоменные запросы не требуют дополнительной настройки. Он вернется к использованию XDomainRequest для более старого IE. https://github.com/mzabriskie/axios/blob/master/lib/adapters/xhr.js#L22

Вы можете предоставить более подробную информацию? Какой браузер, ОС, версия axios, какие-либо сообщения об ошибках.

Я не могу говорить от имени Дженни, но что-то, в частности, эта библиотека вызывает блокировку запросов системой безопасности Cisco Anyconnect по умолчанию, что означает, что это возможно и в других настройках безопасности. Я пытаюсь отследить это, но пока безуспешно.

Это можно воспроизвести, сделав межсайтовый запрос на Mac с установленным cisco Anyconnect и, возможно, другими VPN-клиентами.

Моя среда:

• Axios 0.8.1
• Эль-Капитан
• Хром
• Сообщение об ошибке: «На запрошенном ресурсе отсутствует заголовок 'Access-Control-Allow-Origin'. Следовательно, Origin ' http: // localhost : 3000' не имеет доступа».

Обратите внимание, что тот же запрос работает с curl.

Спасибо, что изучили это!

При использовании CORS на сервер отправляется предварительный запрос, чтобы узнать, разрешен ли запрос. Вам нужно будет, чтобы ваш сервер отвечал на запросы, которые имеют OPTIONS качестве метода запроса, установив заголовок Acces-Control-Allow-Origin: * который будет разрешать запросы из любого источника. В качестве альтернативы вы можете разрешить только определенное происхождение Acces-Control-Allow-Origin: http://example.com .

Да, я это понимаю. Но сервер не мой. Я использую Baas (серверная часть как услуга). И они уже добавили мой домен в список разрешенных. Я проверил, что у других людей, использующих Баас, таких проблем не было.

Я просто ухожу с сообщением об ошибке, которое вы предоставили, но на основании этого не похоже, что у вас что-то работает для вас. Использование curl не даст сбой, потому что безопасность перекрестного происхождения - это всего лишь ограничение в браузере.

Можете ли вы открыть вкладку сети в своем браузере и поделиться тем, что вы получили в ответ на запрос OPTIONS? Надеюсь, что просмотр данных ответа и заголовков поможет решить эту проблему.

Спасибо

Вот заголовки:

Вот заголовки ответов от GitHub, когда я использую axios для получения профиля пользователя из их API:

Вы можете видеть, что GitHub добавляет Access-Control-Allow-Origin: * . В ответе вашего Baas отсутствуют заголовки типа Access-Control .

Понятно, хммм. Извините за очень поздний ответ. Позвольте мне подробнее разобраться в этом. Большое Вам спасибо.

Я не уверен, связано ли то, что я вижу, с этим или нет. По сути, я могу отправить запрос аутентификации на наш удаленный сервер и получить обратно файл cookie, но затем последующие вызовы сервера _ не_ отправляют файлы cookie вместе с ними, что приводит к ошибке.

Вот заголовки вызова POST для входа в систему:

А теперь следующий звонок GET :

IP-адрес, указанный в origin является моим собственным, так что это не должно быть проблемой. Если это неподходящее место, я с радостью создам новый выпуск или прикреплю к соответствующему существующему.

Как новая морщина; Я протестировал последующий вызов GET используя только прямой XHR, и cookie отправляется нормально. Однако выполнение того же вызова через Axios приводит к той же проблеме, о которой я упоминал выше.

Фу. Пожалуйста, не обращайте внимания - я не отправлял вещи, как ожидалось, через Axios :)

Я тоже столкнулся с той же проблемой.
ОПЦИИ Вызов проходит, но вызовы POST застревают в корсете.
http://stackoverflow.com/questions/36907693/axios-cors-issue-with-github-oauth-not-getting-access-token

Как не решить такую ​​ОГРОМНУЮ проблему?

+1

+1

+1

+1

+1

+1

+1

@dsacramone, в чем проблема, которую вы наблюдаете? Похоже, что большинство сообщаемых проблем связаны с проблемами сервера или ложными срабатываниями. Если есть воспроизводимая ошибка, на которую я могу обратить внимание, я буду рад работать над ее исправлением.

получить это тоже

XMLHttpRequest не может загрузить https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=fish. На запрошенном ресурсе отсутствует заголовок Access-Control-Allow-Origin. Следовательно, к источнику http: // localhost : 3000 доступ запрещен.

также получить его с помощью выборки для заметок. Я думаю, что его Chrome недавно сделал свою политику настройки запросов более строгой, я думаю, что ему понадобится какой-то заголовок (не уверен, что именно).

вот пример (оба обслуживаются через https)

Пример 1 - отлично работает

axios.get('https://randomuser.me/api/')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

Пример 2 - Не работает - отображается ошибка?

axios.get('https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=fish')
  .then(function (response) {
    console.log(response.data);
  })
  .catch(function (error) {
    console.log(error);
  });

вот ответ об ошибке

[object Error] {
  config: [object Object] {
    data: undefined,
    headers: [object Object] { ... },
    maxContentLength: -1,
    method: "get",
    timeout: 0,
    transformRequest: [object Object] { ... },
    transformResponse: [object Object] { ... },
    url: "https://en.wikipedia.org/w/api.php?action=opensearch&format=json&search=fish",
    validateStatus: function validateStatus(status) {
      return status >= 200 && status < 300;
    },
    xsrfCookieName: "XSRF-TOKEN",
    xsrfHeaderName: "X-XSRF-TOKEN"
  },
  response: undefined
}

что-то, что может быть актуально, находится в transformResponse? мне интересно, что означает бит PROTECTION_PREFIX?

[object Object] {
  0: function transformResponse(data) {
      /*eslint no-param-reassign:0*/
      if (typeof data === 'string') {
        data = data.replace(PROTECTION_PREFIX, '');
        try {
          data = JSON.parse(data);
        } catch (e) { /* Ignore */ }
      }
      return data;
    }
}

даже пытаюсь

режим: 'no-cors'
в выборке все еще выдает эту ошибку

Я уверен, что ответы довольно простые и просто нужен какой-то заголовок, просто не уверен, что он будет продолжать играть.

wikipedia api может быть просто шатким примером, такая же ошибка у других?

Удаляю этот код, может работать: axios.defaults.withCredentials = true

У меня wikipedia api отлично работает с jsonp

var jsonp = require('jsonp');

// search for 'frog'
jsonp('https://en.wikipedia.org/w/api.php?action=opensearch&search=frog&format=json', null, function (err, data) {
  if (err) {
    console.error(err.message);
  } else {
    console.log(data);
  }
});

Никаких дополнительных конфигов не требуется.

Получение той же ошибки с axios. Вот мой компонент React:

import React, { Component } from 'react'
import axios from 'axios'

export default class User extends Component {
  constructor(props){
    super(props)

    // axios.defaults.withCredentials = true

    const config = {
    method: 'get',
    url: 'https://api.airbnb.com/v2/users/2917444?client_id=3092nxybyb0otqw18e8nh5nty&_format=v1_legacy_show',
    headers: {'X-Requested-With': 'XMLHttpRequest'},
    responseType: 'json',
    withCredentials: true,
  }

    axios.request(config)
      .then(response => { console.log('response: ', response) });

  }

  render() {
    return (
      <div>User</div>
    )
  }
}

_Примечание: я могу отлично справиться с API с запросом узла. _

Я столкнулся с той же ошибкой, что и net::ERR_EMPTY_RESPONSE по запросам CORS, которые выполняются правильно (мой сервер отлично обрабатывает все заголовки CORS, включая OPTIONS). Это странно, потому что на сафари iOS10 точно такой же код работает без проблем. Постараюсь исследовать немного больше самостоятельно, чтобы увидеть, как это можно решить.

На более старом Mac (10.11) с последней версией Chrome я не могу воспроизвести эту ошибку с тем же кодом. Это действительно очень странно. Вы можете воспроизвести это, посетив это очень простое приложение: http://lights.suyashkumar.com и проверив консоль (код здесь . На некоторых машинах ошибки не будет, и вы будете перенаправлены для входа в систему. На других он не будет перенаправлять и оставит вас на главной странице.

Решил мою ошибку. Для меня это была проблема с назначением заголовка в config.headers с нулевым значением при запуске приложения (оно извлекает значение из локального хранилища, и изначально там ничего нет). Присвоение значения пустой строке, когда значение равно нулю, решает проблему. Интересно, можно ли или нужно ли это обрабатывать в рамках axios (не уверен, есть ли смысл в передаче нулевых заголовков в xhr, если он ломается _sometimes_).

Для других с аналогичной проблемой я обнаружил, что некоторые клиенты VPN также могут блокировать запросы OPTIONS (см. Здесь )

Вводящая в заблуждение ошибка CORS все еще остается в аксиомах. Полифилл fetch поддерживает mode: 'no-cors' для решения этой проблемы.

Нам нужно выполнять такие запросы, чтобы делать запросы к машинам в других средах, с которыми мы работаем, а также на одной и той же машине на разных портах!

@dreki Опишите проблему, о которой вы говорили.

Вы не можете ничего сделать на стороне клиента, когда сервер просто не принимает запросы от вашего источника. Если бы вы могли, у нас была бы огромная утечка безопасности (и под словом «мы» я имел в виду весь Интернет) ...

Я думаю, что здесь аксиомы действуют и реагируют полностью согласованно.

Важным заголовком ответа является Access-Control-Allow-Origin который в основном устанавливает допустимые источники, которым разрешено вызывать эту серверную службу. Если ваш клиент не звонит ни из одного из этих настроенных источников, запрос будет отклонен с такой консольной ошибкой:

XMLHttpRequest не может загрузить http: // localhost : 8080 / v1 / api / search? Q = Candles. На запрошенном ресурсе отсутствует заголовок Access-Control-Allow-Origin. Следовательно, к источнику http: // localhost : 9999 доступ запрещен.

Тебя нет в списке гостей.

Исправлена ​​моя проблема.
Пытался получить доступ к моему экспресс-API на localhost:3000 из моего приложения vue на localhost:8080 , но возвращал ошибку.
Оказывается, вам нужно добавить http:// чтобы он заработал.
Поэтому при тестировании разработчика используйте http://localhost:3000 вместо localhost:3000 .

У меня была такая же проблема с wikmedia api. заглянув на их страницу CORS (https://www.mediawiki.org/wiki/Manual:$wgCrossSiteAJAXdomains), я добавил origin = * в запрос, и это устранило проблему.

axios.get('https://en.wikipedia.org/w/api.php?action=opensearch&format=json&origin=*&search=Albert') .then(function(res) { console.log(res); }) .catch(function(err) { console.log('Error: =>' + err); })

Несмотря на то, что я получил страшное сообщение об ошибке cors, мой запрос попал на сервер.

XMLHttpRequest cannot load "...url here...". No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

Команда Axios, не могли бы вы исправить ???

@mellogarrett Это не проблема, связанная с https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

Важная цитата:

«По соображениям безопасности браузеры ограничивают HTTP-запросы между разными источниками, инициируемые из сценариев. Например, XMLHttpRequest и Fetch следуют политике одного источника. Таким образом, веб-приложение, использующее XMLHttpRequest или Fetch, могло выполнять HTTP-запросы только к своему собственному домену. Чтобы улучшить веб-приложения, разработчики попросили поставщиков браузеров разрешить междоменные запросы ».

У многих из тех, у кого есть эта проблема, вероятно, нет сервера, отвечающего на запрос OPTIONS. Убедитесь, что у вас есть обработчики (с заголовками CORS) для запросов OPTIONS и POST. Клиент (axios) сначала пингует OPTIONS, а затем выполняет POST.

У меня такая же ошибка в Firefox, но не в Chromium. Затем я вспомнил, что NoScript был там (в Firefox), предотвращая запрос к удаленному серверу. Если у вас установлен NoScript (или аналогичный плагин), сначала проверьте его.
В моем случае проблема не была связана с Axios. Спасибо за отличную работу.

Для всех, кто искал исправление этой проблемы в Google, у меня были все те же симптомы, но я проследил проблему до настройки php.ini на сервере.

Мой предварительный запрос OPTIONS был успешным, за ним последовал правильный запрос POST, но я все еще получал No 'Access-Control-Allow-Origin' header is present on the requested resource... похожий на @mellogarrett . Это казалось совершенно странным, поэтому я использовал плагин Chrome, чтобы временно отключить защиту CORS. После этого я мог видеть, что проблема на самом деле была ошибкой PHP:

Deprecated: Automatically populating $HTTP_RAW_POST_DATA is deprecated and will be removed in a future version. To avoid this warning set 'always_populate_raw_post_data' to '-1' in php.ini and use the php://input stream instead. in Unknown on line 0

В этом посте есть дополнительная информация о проблеме, но вкратце, если вы используете PHP 5.6, вы должны раскомментировать always_populate_raw_post_data в своем php.ini и установить значение -1 . Надеюсь, это сэкономит кому-нибудь еще несколько часов на устранение неполадок 🤓

Привет @daltonamitchell Похоже, у меня такая же проблема (условия предполагают, что это та же проблема). Но мне интересно: как вы выяснили, что проблема в необработанных данных поста? При использовании плагина Chrome, который вы упомянули, запрос CORS проходит, и все работает нормально. Но даже если заголовки настроены правильно, я не могу заставить его работать без плагина. Так что, возможно, сообщение об устаревании просто не отображается, но проблема все еще существует ...? Вы можете посоветовать, как это проверить?

@ RT-TL плагин используется только для просмотра содержимого ответа без блокировки CORS. В моем случае в целях тестирования я просто возвращал строку типа Hello World поэтому, как только я отключил CORS, я увидел что-то вроде

Deprecated: Automatically populating $HTTP_RAW_POST_DATA is deprecated and will be removed in a future version. To avoid this warning set 'always_populate_raw_post_data' to '-1' in php.ini and use the php://input stream instead. in Unknown on line 0
Hello World

Убедитесь, что у вас включены предупреждения PHP , добавив error_reporting(E_ERROR | E_WARNING | E_PARSE | E_NOTICE) или error_reporting(E_ALL) в начало метода вашего контроллера. Если вы по-прежнему ничего не видите, я просто попытаюсь вернуть простой ответ JSON, чтобы убедиться, что они выглядят так, как ожидалось.

Кто-нибудь все еще сталкивается с этой проблемой? Я сталкиваюсь с тем же:

const instance = axios.create({
    baseURL: 'http://localhost/',
    responseType: 'json',
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        'Authorization': 'test',
        'X-Test': 'testing'
    }
})
axios.get('v2/portal/bar/foo?')

Заголовки ответа

HTTP/1.1 401 Unauthorized
Server: nginx/1.11.10
Date: Fri, 24 Mar 2017 07:12:13 GMT
Content-Type: application/json; charset=UTF-8
Content-Length: 0
Connection: keep-alive
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, PUT, DELETE, GET, OPTIONS
Access-Control-Allow-Headers: *

Заголовки запроса

OPTIONS /v2/portal/bar/foo? HTTP/1.1
Host: localhost
Connection: keep-alive
Access-Control-Request-Method: GET
Origin: http://localhost:3000
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.98 Safari/537.36
Access-Control-Request-Headers: authorization,content-type,x-test
Accept: */*
Referer: http://localhost:3000/dashboard/report
Accept-Encoding: gzip, deflate, sdch, br
Accept-Language: en-US,en;q=0.8,fr;q=0.6,nl;q=0.4,zh-TW;q=0.2,zh;q=0.2,zh-CN;q=0.2

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

Здесь та же проблема, запрос OPTIONS выполняется, а запрос POST - нет.

TL; DR: fetch работает, axios - нет, если я не использую JSON.stingify

Итак, я также видел вариант этой ошибки, когда OPTIONS возвращает 200 с заголовками, установленными для запросов с перекрестным происхождением, но POST не выполняется. Я использую это расширение, и оно начинает работать как положено. Но я почти уверен, что здесь есть какая-то проблема. Взгляните на мою просьбу:

Мой сервер отвечает Access-Control-Allow-Origin: *
Вот все примеры с кодом и скриншотами:

Аксиос:

axios.post('http://localhost:3001/card', { test: 'test' })

принести:

    return fetch('http://localhost:3001/card', {
      method: 'POST',
      body: { test: 'test' },
    })

с JSON.stringify

    return fetch('http://localhost:3001/card', {
      method: 'POST',
      body: JSON.stringify({ test: 'test' }),
    })

Я смог заставить работать аксиомы, используя JSON.stringify мои данные следующим образом:

    return axios.post('http://localhost:3001/card', JSON.stringify({ test: 'test' }));

Я столкнулся с той же проблемой, что и объяснил @zlyi, я просто добавил строку axios.defaults.withCredentials = true; и все заработало, как ожидалось.

Пробовал все, но проблема не исчезла. :(

Пробовал все, но проблема не исчезла. :(

справились с этой проблемой, добавив в .htaccsess следующее:

<IfModule mod_headers.c> 
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type" 
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS" 
</IfModule>

Я смог решить эту проблему с помощью прокси. Добавьте прокси в package.json

{
    "proxy": "http://some-url/some-endpoint"
}

Затем запросите:

axios.get('/user?ID=12345')
  .then(function (response) {
    console.log(response)
  })
  .catch(function (error) {
    console.log(error)
  })

Это проблема на стороне сервера, в заголовке ответа необходимо указать 'Acces-Control-Allow-Origin': '*' . Если вы используете Express, можете использовать npm-cors для более надежной и элегантной реализации.

+1 @ProfNandaa
я создал экспорт на моем локальном сервере

# cors.js file
module.exports = (req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", "*");
  res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
}

Итак, я назначаю:
`` ''
const cors = require ('cors');
router.use (cors);
`` ''
теперь идем дальше ... спасибо

Ошибка возникает, когда сервер не принимает запрос OPTION.

Для тех, кто комментирует «Добавить обработку запроса OPTION на ваш сервер», это не работает. Я использую локальную среду, в которой включена обработка запросов OPTION.

Я столкнулся с этой проблемой точно так же, как и пользователь выше, где Axios.post(url, obj) вернул запрещенную ошибку CORS 403, но обновление до Axios.post(url, JSON.stringify(obj)) работало правильно.

Я работаю над простым учебным проектом, и у меня возникли проблемы с доступом к различным API. Единственное работающее решение, которое я нашел, - это то, о котором говорил тиагодебастос выше.

Я просто заменил jsonp на get и смог получить доступ к данным.

У меня была эта проблема, и коа-коры были простым решением! (npm-cors для пользователей Express по версии ProfNandaa)

Для тех, у кого все еще есть проблемы с этим: Axios будет нормально работать с COR , с запросами OPTIONS, с JSON, отправленным в качестве тела запроса, не являющимся JSON.encoded , и с отправленными и сохраненными файлами cookie должным образом, если Axios и сервер, отвечающий на запросы, настроен правильно.

Потребовалось несколько разочаровывающих проб и ошибок, но у нас есть междоменные запросы, отлично работающие с Axios.

Некоторые моменты:

Чтобы запрос работал, убедитесь, что

• Сервер отвечает на запросы OPTIONS, как если бы ответ был любым, кроме 200 со всеми правильными заданными заголовками, « предварительно

• Запрос выполняется с правильными заголовками, и сервер отвечает всеми необходимыми заголовками.

• Если требуются файлы cookie / заголовки авторизации или клиентские сертификаты TLS, отправьте для параметра allowCredentials значение true для запроса Axios. Это можно сделать по умолчанию ( axios.defaults.withCredentials = true ) или по запросу.

Пример успешных заголовков запроса

Access-Control-Request-Headers: Content-Type
Access-Control-Request-Method: GET

Пример заголовков успешного ответа

Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
Access-Control-Allow-Methods: GET, POST, PUT, PATCH, DELETE, HEAD, OPTIONS
Access-Control-Allow-Origin: http://your-origin-url.com

Мы постепенно добавляли заголовки ответов и обнаружили, что у нас есть различные, трудно диагностируемые ошибки и неожиданное поведение с различными комбинациями.

Без Access-Control-Allow-Credentials: true файлы cookie не отправлялись и не сохранялись, что имеет смысл после чтения страницы MDN для этого заголовка.

Чтение этой документации помогает.

Всем, у кого есть проблема, важно ...Allow-Headers: Content-Type .

Access-Control-Allow-Origin: '*'
Access-Control-Allow-Methods: ...
Access-Control-Allow-Headers: Content-Type, Accept

Я использую это расширение Chrome под названием 'Allow-Control-Allow-Origin: *'
надеюсь, что это поможет решить вашу проблему.

Для тех, кто не понимает, почему Axios НЕ МОЖЕТ исправить эту ошибку:

Это не проблема Axios. Это проблема с браузером. JS в браузере будет отклонять запросы к серверам, для которых не установлены правильные заголовки. Если вы используете это с чем-то вроде React на клиенте, не запутайтесь, это не проблема React или Axios, это просто браузер, соответствующий стандарту CORS.

JakeElder дает хорошее описание того, что вам нужно делать на стороне сервера вашего API здесь: https://github.com/mzabriskie/axios/issues/191#issuecomment -311069164

Если у вас нет контроля над сервером, к которому вы пытаетесь получить доступ, вам следует создать прокси-сервер, чтобы получать контент для вас и возвращать его с правильными заголовками.

Не уверен, почему это было реализовано. Конечно, раздражает, когда вы просто хотите сделать запрос к серверу, чтобы получить некоторую информацию, но не можете, потому что у сервера нет определенного набора заголовков. Кажется крайне ограничительным. Ну что ж ...

@ robins-eldo Опять же, я не верю, что вы правы.

Мой оригинальный комментарий:

For those commenting saying "Add OPTION request handling to your server", that does not work. I'm running a local environment that has OPTION request handling enabled.

I experienced this issue identically as a user above, where Axios.post(url, obj) returned the CORS 403 forbidden error, but updating that to Axios.post(url, JSON.stringify(obj)) worked correctly.

Если бы на самом деле это была проблема сервера, а не проблема Axios, преобразование объекта в строку не имело бы никакого влияния, поскольку запрос OPTIONS в любом случае завершился бы ошибкой.

@alexanderbanks

Не уверен в методе OPTION HTTP, но моя конкретная проблема заключалась в том, что у меня есть клиент React, пытающийся выполнить POST для внутреннего API, который я написал (внутренний API здесь является сервером). Я все время получал эту ошибку: Failed to load resource: Origin http://localhost:7149 is not allowed by Access-Control-Allow-Origin. XMLHttpRequest cannot load http://localhost:8902/user-login due to access control checks.

Я подумал, что это может быть проблема Axios, поэтому я попробовал вместо этого Unirest и продолжал получать ту же ошибку. Так что я подумал, что это должно быть что-то еще. Не уверен, что это проблема браузера или React, но как только я добавил следующее на свой сервер API (который является API Nodejs + Express), все начало работать как с Axios, так и с Unirest на стороне клиента:

app.use(function(req, res, next) { res.header("Access-Control-Allow-Origin", "*"); next(); });

Возможно, мое понимание того, что на самом деле происходит за кулисами, несколько ограничено, однако этот фрагмент кода на сервере решил проблему для меня.

Убедитесь, что ваш сервер не слишком сильно ограничивает доступ к источнику, и если вы хотите обойтись без ошибок, попробуйте следующее:

    return axios(url, {
      method: 'POST',
      mode: 'no-cors',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
      withCredentials: true,
      credentials: 'same-origin',
    }).then(response => {
    })

Я думаю, что некоторые люди здесь не понимают, как работает CORS. Однако исходная проблема заключалась не в CORS или, по крайней мере, в этом должна была быть важная проблема. Я имею в виду, что когда у вас правильно настроен CORS, но даже если Post не работает, то это проблема, о которой нужно сообщить, а не о том, как правильно настроить сервер.

API ведет себя странно. Все запросы Cors GET работали с учетными данными: true.
Для запросов POST тот же запрос происхождения работает без строкового преобразования объекта данных, в то время как для запроса CORS POST также начинает работать, когда я привязываю к объекту данных.

Точно не понял причину, но проблема была решена за меня.

Извините, но я блокирую эту тему, поскольку кажется, что мы делаем круги по одной и той же теме. Если у вас есть конкретная проблема, которая не была затронута в другой проблеме (общие проблемы CORS из-за неправильной конфигурации, запросы POST, отправляемые как JSON, а не в формате urlencoded, и т. Д.), Пожалуйста, откройте новую с конкретными деталями.