AXIOS request method changes to 'OPTIONS' instead of 'GET'
axios, react-typescript, reactjs
Solution
`OPTIONS` request is part of the so-called preflight request which is needed to figure out the CORS headers to know what needs/is allowed to be sent to the server with the actual `GET` request. Thats why you normally see two requests in your network tab (depending on your setting)
In your example it seems you have not configured anything CORS related on your server (thus the 405) or specifically have forbidden anything other than GET/POST requests. Or potentially the site has forbidden others to access its data
Problem
I am trying to call and API with react app(TSX) using Axios(this the first time I am using Axios) every time I run the app the method changes to 'OPTIONS' and the request becomes invalid. Help will be appreciated. Sharing my code sorry I am hiding the Auth Token for security reasons. Code ``` 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; ``` Attached image of response