Почему этот запрос работает в postman и curl, но не в React?

Это мой первый вопрос о stackoverflow, поэтому, если я что-то сделаю не так, простите меня.

Я нахожусь на своей первой настоящей работе разработчика, и уже немного борюсь. Мне нужно сделать запрос API, чтобы получить токен JWT, который затем я буду использовать для целей аутентификации.

Это успешный запрос, который я делаю в Postman, и он возвращает то, что должен.

curl --location --request POST {{API_AUTHENTICATION_URL}} 
--header 'Authorization: Basic {{AUTH_TOKEN}}' 
--form 'service = "appEvent"'

Которые возвращают что-то вроде

{
    "jwt": "..."
}

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

const getAuthToken = (): any => {
    const myHeaders = new Headers()
    myHeaders.append(
        'Authorization',
        'Basic ' + authToken
    )

    const formdata = new FormData()
    formdata.append('service', 'appEvent')

    const requestOptions: RequestInit = {
        method: 'POST',
        headers: myHeaders,
        body: formdata,
    }

    fetch(api.url + '/authentication', requestOptions)
        .then((response) => response.text())
        .then((result) => console.info(result))
        .catch((error) => console.info('error', error))
}

Таким образом, это дает мне следующую ошибку:

Access to fetch at {{API_URL}} from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
getAuthToken.ts:20 POST {{API_URL}} net::ERR_FAILED

Если я попытаюсь добавить mode: no-cors в свой запрос, он выдаст мне такую ​​ошибку:

POST {{API_URL}} 401 (Unauthorized)

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

Если кто-то может мне помочь, я был бы очень признателен.

Ошибка говорит о том, что вам нужна поддержка заголовков CORS в вашем API и какие именно заголовки. Это нет того же источника, потому что, если вы обращаетесь к другому порту, это считается другим источником.

Evert 05.04.2021 21:16

Также написал этот пост, чтобы объяснить no-cors: evertpot.com/no-cors

Evert 05.04.2021 21:16

Спасибо за ответ. Почему запрос правильно работает с curl или с клиентом почтальона? У меня нет доступа к коду API, поэтому я не могу изменить заголовки CORS.

Giovanni Costa 05.04.2021 22:08
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
1
3
20
0

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