Блог

Я пытаюсь вызвать и API с помощью приложения react app (TSX) с использованием Axios (это первый раз, когда я использую Axios) каждый раз, когда я запускаю приложение, метод меняется на ‘OPTIONS’, и запрос становится недействительным. Помощь будет оценена. Делюсь своим кодом извините, я скрываю токен аутентификации по соображениям безопасности.

Код

 import React, { useState, useEffect } from 'react';
import axios from 'axios';

interface Brands {
  BrandId: number;
  Name: string;
}
const AUTH_TOKEN = Something hiden for security;


var baseUrl = axios.defaults.baseURL = 'https://fppdirectapi-prod.fuelpricesqld.com.au/Subscriber/GetCountryBrands?countryId=21';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.get['Content-Type'] = 'application/json';
axios.defaults.method = 'get';

const FetchFuelType = () => {
  const [brands, setPosts] = useState<Brands[]>([]);

  useEffect(() => {
    axios.get(baseUrl)

      .then(res => {
        console.log(res)
        setPosts(res.data)
      })
      .catch(err => {
        console.log(err)
      })
  }, [])
  return (
    <div>
      <ul>
        {brands.map(Brand => (<li key={Brand.BrandId}>{Brand.Name}</li>))}
      </ul>
    </div>
  );
};

export default FetchFuelType;
  

Прикрепленное изображение ответа

OPTIONS запрос является частью так называемого предполетного запроса, который необходим для определения заголовков CORS, чтобы знать, что нужно / разрешено отправлять на сервер с фактическим GET запросом. Вот почему вы обычно видите два запроса на вкладке «Сеть» (в зависимости от ваших настроек)

В вашем примере кажется, что вы не настроили ничего, связанного с CORS, на своем сервере (таким образом, 405) или специально запретили что-либо, кроме запросов GET / POST. Или, возможно, сайт запретил другим доступ к своим данным

Обычно options запрос отправляется ранее get автоматически axios, чтобы получить некоторые предварительные данные перед запуском get вызова. Проверьте это https://github.com/axios/axios/issues/475.

Запрос ПАРАМЕТРОВ является неотъемлемым запросом, генерируемым браузером. Браузер использует вызов OPTIONS, чтобы узнать, какие методы разрешены сервером.

Сервер API, предназначенный для поддержки запросов из браузера, должен разрешать ОПЦИИ в дополнение к фактическому методу (GET / POST / etc).

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

Сервер, который не поддерживает OPTIONS, может поддерживать только клиенты без браузера (примеры: клиент REST в Java / nodejs)

Как решить эту проблему?

Проблема «метод 405 — ОПЦИЙ не разрешен» может быть решена одним из этих 2 способов:

1. Обновите сервер для поддержки метода OPTIONS (рекомендуется для сервера, который должен поддерживать браузеры)

2. Разработайте «Промежуточный клиент REST», который будет запрашивать данные с сервера от имени браузера

Браузер <—> Клиент REST (поддерживает ПАРАМЕТРЫ, POST) <—> Фактический веб-сервис (не поддерживает ПАРАМЕТРЫ)