Add HTTP CORS headers
under review
Elizabeth Oster
Add HTTP headers to lift CORS restrictions to enable Localhost API access when using SerpApi from a JavaScript with restricted access.
Justin O'Hara
Merged in a post:
get response
صادق حسینی
hi, i'm front end developer and i want to get data from autocomplete api which is https://serpapi.com/search?engine=google_autocomplete&q=data&gl=us&hl=en&api_key="KEY"
but i didn't get the result and i got cors ERROR, net:ERR FAILED 200
what should i do ???
how can i get response from this api???????
please help me
Justin O'Hara
Hi, we don't allow cross-origin requests from the browser because API Key will be visible to users of your application. To work around this, proxy requests to SerpApi on your backend. More about HTTP CORS headers in this forum thread.
صادق حسینی
but when i click on this api i see the result in new tab....
i really don't know what should i do?
Elizabeth Oster
Merged in a post:
fetch google news with java script
No Name
I was about to use linke for example
let url =
https://serpapi.com/search.json?q=${topic}&tbm=nws&api_key=${apiKey}
;with passing my topic and apikey as parameters. The link is fine, but when I want to await fecth(url); I get the error from attached image. Am I doing it wrong with JS and if not how can I receive results I get in the browser when I go to link
No Name
Ok, but I have problem not only on my local host but on the hosted application on domain also? Also, on link I cant see any of the methods to use proxy and why... I don't really care if my apiKey is visible to my users...
Illia Zub
Hi No Name, we don't allow cross-origin requests from the browser because API Key will be visible to users of your application. To work around this, proxy requests to SerpApi on your backend. More about HTTP CORS headers in this forum thread.
Illia Zub
under review
C
Corey H
I'm having a similar issue. I just have a frontend single page React app.
I would really love to not create an additional back end node server just for 1 fetch call. Been using this hacky workaround in the meantime, https://www.npmjs.com/package/cors-anywhere - Any tips greatly appreciated.
Illia Zub
Corey H: Do you want to make requests from the front-end to
/locations
or to /search
API endpoint?Lucas Bazemore
Thank you Elizabeth for adding this! What is the recommended method for testing locally? At the moment I'm simply running it inside a single index.js file on node to test.
Julien Khaleghy
Lucas Bazemore: Hi Lucas, you should be able to force your HTTP client to ignore CORS policies in your programing language.
R
Renan Martorelli
Julien Khaleghy: Hi Julien, in my point of view the CORS question is more complex than that, as it implies not only to local testing, but also for requests coming directly from a frontend application (such as a Angular, React or Vue app). In this case, you can't force the browser of your web app users to ignore the CORS policies unless there is a CORS mechanism in the API backend.
In my case I'm acessing the private SERP API's using my API backend as a proxy that prevents the CORS issues, but in some cases it would be really useful and easier to call it directly from the frontend instead, such as building an autocomplete input for the search location parameters that consumes the location API, which is public and free.
Julien Khaleghy
Renan Martorelli: I think I get your issue. You mean you have an application running on the client side that needs to access SerpApi but because we don't have the CORS headers allowing the client to do that, it doesn't work?
In that case, are you not worry that the user using the application is able to access your code and find out your API key and make it own requests?
R
Renan Martorelli
Julien Khaleghy: That is exactly the point, I would be using it only for the "Extra" Location API, which is public and does not require API keys.
Julien Khaleghy
Renan Martorelli: oh, it’s just for the Location API. Got you. Why not just download the full database? It’s public and free: https://serpapi.com/locations.json