AXIOS请求方法更改为“OPTIONS”而不是“GET”

Question

我将为您翻译以下内容，这是关于IT技术的。在此之前，我想提醒您，请勿在生产环境中使用隐藏的身份验证令牌。

我正在尝试使用Axios（这是我第一次使用Axios）在React应用程序（TSX）中调用API，每次运行应用程序时，方法都会更改为“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;

附上响应的图片

- Krishneil

---

这是可以预料的。您能否发布错误信息，我们将能够提供帮助。 - sidthesloth

Answer 1

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

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

- japrescott

Answer 2

OPTIONS请求是浏览器自动生成的请求。

浏览器使用OPTIONS调用来查找服务器允许哪些方法。

用于支持浏览器请求的API服务器必须允许OPTIONS以及实际的方法（GET/POST/等）。

如果服务器不支持OPTIONS，则可能不支持浏览器。

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

如何解决问题？

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

1. 更新服务器以支持OPTIONS方法（建议用于应该支持浏览器的服务器）

2. 开发“中间REST客户端”，代表浏览器向服务器请求数据

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

- Gopinath

Answer 3

通常，在自动发送get请求之前，会先发送options请求，以获取一些预备数据。请查看https://github.com/axios/axios/issues/475。

- Praveenkumar