Реакция на стороне клиента JS почтовый запрос - PullRequest
Новая
       8

Реакция на стороне клиента JS почтовый запрос

1 голос
/ 30 мая 2020

Я пытаюсь выполнить почтовый запрос на сервер, работающий на том же компьютере, из клиентского приложения для реагирования, но получаю кучу ошибок. Проблема CORS, я также установил временный фильтр на стороне сервера для передачи заголовка Access-Control-Allow-Origin : *.

У меня нет проблем с запросами GET по этому поводу. Я могу без проблем запрашивать API.

К сожалению, это не относится к POST (извините за мое незнание, если ответ очевиден - возможно ли вообще отправлять запросы на публикацию на стороне клиента? )

ниже - это функция, которая выполняет запрос и ожидает результат на консоли. 

    const postAddCategory = () => {

        const myHeaders = {host: "localhost:3000"};

        const body = {"productCategoryName": categoryName, "enabled": enabled};

        const config = {
            headers: myHeaders
        };
        axios.post("http://localhost:8080/products/categories/category/add", body, config)
            .then(r => console.log(r.data))
    }

Ошибки: enter image description here

Интересен тот факт, что запрос вообще не достигает API.

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

Любая помощь будет принята с благодарностью.

Спасибо

редактировать

Даже если звонок не достигая API,

API встроен в Java (Spring Boot), а фильтр следующий: 

@Component
public class ForDevelopmentOnlyFilter implements Filter {

    @Override
    public void doFilter(ServletRequest request,
                         ServletResponse response,
                         FilterChain chain) throws IOException, ServletException {
        HttpServletRequest req = (HttpServletRequest) request;
        HttpServletResponse res = (HttpServletResponse) response;

        res.addHeader("Access-Control-Allow-Origin", "http://localhost:3000");
        chain.doFilter(req, res);
    }
}

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

1 Ответ

1 голос
/ 30 мая 2020

Root причина проблемы отображается в ошибке -

Content-type не разрешен заголовками Access-control-allow-headers

Эту проблему можно решить, явно добавив на сервер следующий заголовок:

'access-control-allow-headers: content-type' на сервере.

Ссылка:

AJAX запросы из браузера выполняются в три этапа:

Шаг 1: (Предполетный запрос)

Браузеры запрашивают у сервера разрешение, используя запрос 'HTTP OPTIONS' . Это также называется «предполетным» запросом.

Шаг 2: (Сервер сообщает варианты) Сервер отвечает на предполетный запрос и указывает браузеру, что разрешено.

Этот ответ содержит следующую информацию:

  • Разрешенные источники (пример: xyz.com, *)
  • Разрешенные методы (пример: get, отправить, удалить, поместить ...)
  • Разрешенные заголовки (Пример: авторизация, тип содержимого, *)

Шаг 3: Браузер проверяет параметры предоставляется сервером и выполняет фактический запрос AJAX, только если параметры, предоставляемые сервером, позволяют это.

Дополнительная информация:

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Headers

...