CORS + AXIOS+REACTJS

123
13 марта 2021, 07:30

Пишу клиента, используя ReactJS, для http запросов использую axios, делаю пост запрос к серверу, на сервере запрос обрабатывается и возвращает данные и код 200, но в браузере ошибка:

Access to XMLHttpRequest at 'https://Xxxxxx' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

и предупреждение

xhr.js:166 Cross-Origin Read Blocking (CORB) blocked cross-origin response 'https://Xxxxxx' with MIME type application/json. See https://www.chromestatus.com/feature/5629709824032768 for more details.

Почитал что было предложен браузером но не помогло

Код:

import axios from 'axios';
const baseIP = ''
const baseURL = 'x' + baseIP
const baseAPI = axios.create({
    baseURL: baseURL,
});
const getConfig = (params) => {
    return {
        baseURL: baseURL,
        headers: {
            'Content-Type': 'application/json',
        },
        params: params,
    };
};

const API = {
    // isAuth: () => { return Auth.isAuthenticated(); },
    // Login: (data, handler) => { return Auth.authenticate(data, handler); },
    // Logout: (handler) => { return Auth.signout(handler); },
    GET: (path, params) => baseAPI.get(path, getConfig(params)),
    POST: (path, data) => baseAPI.post(path, data, getConfig()),
    PUT: (path, data) => baseAPI.put(path, data, getConfig()),
    DELETE: (path, params) => baseAPI.delete(path, getConfig(params)),
};
class BotService{
    getFonds = () => API.POST('x')
};
export default BotService;

Можете подсказать куда копать?

Answer 1

Это решается двумя способами.

  • Использовать callback в запросе jsonp.
  • Или на сервере api добавить заголовок Access-Control-Allow-Origin с доменом, с которого выполняется запрос.

Как третье решение - проксировать запросы апи на сервере исключив при этом CORS.

READ ALSO
fontawesome в Заголовке браузера

fontawesome в Заголовке браузера

Поставил на сайт шрифт fontawesome поставил иконки в названиях категорий но возник вопрос: в браузерной строке он не отображается как надо - вместо...

122
Удаление структуры

Удаление структуры

Имеется структура

122