AXIOS 请求方法更改为 'OPTIONS' 而不是 'GET'答案

【问题标题】：AXIOS request method changes to 'OPTIONS' instead of 'GET'AXIOS 请求方法更改为 'OPTIONS' 而不是 'GET'
【发布时间】：2020-09-05 08:37:51
【问题描述】：

我尝试使用 Axios（这是我第一次使用 Axios）调用和 API 与 react app(TSX) 每次我运行应用程序时，方法更改为“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;

附上回复图片

【问题讨论】：

这是预期的。您能否发布错误，我们将能够提供帮助。

标签： reactjs axios react-typescript

【解决方案1】：

OPTIONS 请求是所谓的preflight request 的一部分，它需要找出 CORS 标头以了解需要/允许将哪些内容与实际的 GET 请求一起发送到服务器。这就是为什么您通常会在网络选项卡中看到两个请求（取决于您的设置）

在您的示例中，您似乎没有在服务器上配置任何与 CORS 相关的内容（因此是 405），或者明确禁止了除 GET/POST 请求之外的任何内容。或者该网站可能禁止其他人访问其数据

【讨论】：

【解决方案2】：

通常，options 请求在 get 之前被 axios 自动发送，以便在触发 get 调用之前获取一些初步数据。检查这个https://github.com/axios/axios/issues/475。

【讨论】：

【解决方案3】：

OPTIONS 请求是浏览器生成的固有请求。浏览器使用 OPTIONS 调用来找出服务器允许的方法。

用于支持来自浏览器的请求的 API 服务器必须允许除了实际方法（GET / POST / 等）之外的 OPTIONS。

如果服务器不支持OPTIONS，那么它可能不支持浏览器。

不支持 OPTIONS 的服务器只能支持非浏览器客户端（示例：Java/nodejs 中的 REST 客户端）

如何解决问题？

“405 - 不允许使用 OPTIONS 方法”的问题可以通过以下两种方式之一解决：

更新服务器以支持 OPTIONS 方法（推荐用于应该支持浏览器的服务器）
开发一个“中间 REST 客户端”，它将代表浏览器从服务器请求数据

浏览器 REST 客户端（支持 OPTIONS、POST）实际 Web 服务（不支持 OPTIONS）

【讨论】：