我正在尝试使用 Axios 调用 React 应用程序 (TSX) 和 API(这是我第一次使用 Axios),每次我运行该应用程序时,方法都会更改为“OPTIONS”并且请求变得无效。帮助将不胜感激。分享我的代码抱歉,出于安全原因我隐藏了 Auth Token。
代码
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
请求是所谓的 preflight request 的一部分这需要找出 CORS header ,以了解需要/允许使用实际 GET
请求将什么发送到服务器。这就是为什么您通常会在网络选项卡中看到两个请求(取决于您的设置)
在您的示例中,您似乎没有在您的服务器上配置任何与 CORS 相关的内容(因此是 405),或者明确禁止除 GET/POST 请求之外的任何内容。或者该网站可能已禁止其他人访问其数据
关于reactjs - AXIOS 请求方法更改为 'OPTIONS' 而不是 'GET',我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63752007/