ReactJS fetching API - ошибка CORS

Отправка запроса из приложения ReactJS:

fetch(http://my-api-domain, {
        method: 'GET',
        mode: 'cors', //tried no-cors and same-origin
        headers: {
            'X-Auth-Token': auth_token' // custom-header
        }
    }).then(response => console.info(response))
        .then(data => {
            console.info(data);
        }
    });

package.json файл имеет "proxy": "http://my-api-domain/"

Затем у меня возникает эта ошибка в браузере (firefox):

- Cross-Origin Request Blocked: (Reason: missing token ‘x-auth-token’ in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel).
- Cross-Origin Request Blocked: (Reason: missing token ‘access-control-allow-headers’ in CORS header ‘Access-Control-Allow-Headers’ from CORS preflight channel).
- Cross-Origin Request Blocked: (Reason: CORS request did not succeed).

PS: Конфигурация сервера API в порядке. Я тестировал свой API на Postman. Отправьте запрос GET с заголовком key: X-Auth-Token; value: [token]. Работает отлично.

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
0
1 356
1

Ответы 1

Это работает в почтальоне, потому что он игнорирует запросы CORS.

Если вы установите режим «no-cors», он все равно может игнорироваться браузером в качестве меры безопасности. Chrome наверняка проигнорирует этот флаг и вернет вам ошибку.

Решения:

  • Внесите свой IP в белый список API, если это ваш API
  • Настройте обратный прокси-сервер, такой как Nginx, который добавит вам заголовок разрешения происхождения. Затем вы сделаете запрос к RP, и он вернет ответ с прикрепленным для вас заголовком Allow-Origin.
  • Настройте локальную конечную точку прокси .php или node.js, которая будет делать то же самое, что и RP
  • Запустите браузер в небезопасном режиме.

Пример Chrome - отсутствие безопасности (Windows)

"C:\Program Files\Google\Chrome\Application\chrome.exe" --args --disable-web-security

я нашел решение. Я должен был проксировать свой сервер :)

vonqo 16.08.2018 11:27

Другие вопросы по теме