I have used Axios for fetching my data to client side from my API but my Get request didn't work well and axios shows some error.
Here i add my code and problem as Screenshot..
Related
I am using the slack api in a typescript application, where when I initially send a payload through a slack / command, this payload has a response_url. I am able to post data to this response_url with axios, but I have trouble making a get request to this url to access the data I have previously posted. I have tried axios.get(response_url) and await axios.get(response_url) but I have gotten invoke error with status code 500 and a result of Promise {<pending>} - would anyone know the correct way to use the get call?
I'm trying to replicate a post request done normally by a website form via postman but the server returns 500 error.
the form website URL that I'm dealing with is here.
what I have done so far is investigate the network request using chrome or safari dev tools, copy the request as cURL, import the cURL in postman and do the request.
what can be the possible reasons for the failure and what are the alternative ways to achieve the same result?
Postman Headers:
Most probably you must have used invalid request body. The browser shows parsed json body and you might have copied incomple request body.
To get full body click view source and copy the full content.
I want to call an api with GET method and pass some form data. But seem axios is not supporting the form data with GET. Is there any way for me to overcome this problem?
ps: I am using react query and axios
You can't send a form data through GET request but you can customize the request's URL query parameters. Look at the code sample below.
//assuming instance is your axios instance.
instance.get("/test",{params:{key:value, key1:value1}}).then((data)=>{}).catch((error)=>{})
//this will send a GET request to /test?key=value&key1=value1
GET request doesn't support form data but you can use URL query parameters. Just like I did above.
For more information about axios visit axios npm package
I am getting a preflight error 405: Method not allowed from the HERE API when I request autocomplete as per the documentation.
UPDATE 2:
I have since determined that Axios was adding my default.common authentication headers from my app's API client onto the HERE API client. Axios is supposed to keep those defaults separate per-client, but it seems that it doesn't ... at least not the version I have. I replaced the defaults with a per-client request interceptor and it worked fine. The request no longer triggers an OPTION pre-flight. No issue with HERE's API other than that it doesn't support OPTION method.
UPDATE:
The reason it fails is because HERE does not support the OPTIONS method, only the GET. So now the question is: Why does axios trigger an OPTIONS request when I don't set any headers? An XMLHttpRequest() based GET request does not trigger OPTIONS for the same URL. Something is happening with axios but I don't know what and I can't seem to investigate the headers that axios is sending.
ORIGINAL:
I've tried to find information about this error, as well as HTTP vs HTTPS. I haven't seen others having this problem so I feel like I must be making a simple error. The URL is generated correctly because it works when pasted directly into the browser for example.
const hereClient = axios.create({
baseURL: 'https://autocomplete.geocoder.api.here.com/6.2/'
})
async function searchHere (query) {
let searchTerms = query.split(' ').join('+')
let result = await hereClient.get('suggest.json', {
params: {
app_id: '<APPID>',
app_code: '<APPCODE>',
query: searchTerms
}
})
return processHereSearchResults(result.data)
}
The GET request fails on the OPTION preflight with a 405: Method not allowed. But if I paste the generated URL into a browser then it returns the expected results. For example:
https://autocomplete.geocoder.api.here.com/6.2/suggest.json?app_id=APPID&app_code=APPCODE&query=8131
returns:
{"suggestions":[{"label":"Česko, Brandýs nad Orlicí, 3123","language":"cs","countryCode":"CZE","locationId":"N . . .
Same result whether http or https.
I have since determined that Axios was adding my default.common authentication headers from my app's API client onto the HERE API client. Axios is supposed to keep those defaults separate per-client, but it seems that it doesn't ... at least not the version I have. I replaced the default header setting with a per-client request interceptor to set my authentication and it worked fine. The request no longer triggers an OPTION pre-flight. No issue with HERE's API other than that it doesn't support OPTION method.
I am trying to access zomato api.
URL: https://developers.zomato.com/api/v2.1/categories
Headers: 'X-Zomato-API-Key':'myapikeyhere-763demoapi434'
If I use chrome's postman extension or curl then I can access the url & getting 200 status code.
But if I run it through my angular2 app or simple ajax, it is giving error at preflight OPTIONS request, error code is 501. I have tried otherways too, error is same. Need help
Zomato API's can only be accessed from server to server calls, the error message you have reported is a security policy implemented by Chrome to prevent cross site request forgery on the client side.
A way you can get around this is to write a handler on your server end to make handler which the ajax call will use, this handler in-turn makes a request to the Zomato's server to retrieve the data required.