How do I fix CORS Error when Trying to fetch data from SERP API into my react app

Question

I am trying to fetch data from SERP API to fetch Job_Results, on postman, I am able to fetch my data but when I try to fetch it using Axios, I get CORS Error even after specifying Proxy in package.json and passing appropriate headers.

This is my code snippet:

let config = {
      headers: {
        "Content-Type": "application/json",
        "Access-Control-Allow-Origin": "*"
      },
    };
    const data = await axios.get(
      "https://serpapi.com/search.json?engine=google_jobs&q=internship+new+delhi&hl=en&api_key=xxxxxx",
      config
    );

Does this answer your question? [Why does my JavaScript code receive a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error, while Postman does not?](https://stackoverflow.com/questions/20035101/why-does-my-javascript-code-receive-a-no-access-control-allow-origin-header-i) — mahooresorkh, Mar 27 '22 at 06:54
No, Actually most of the solutions I found only included either passing the header, or do some changes in node js backend which is not applicable in my case. — Tushar, Mar 27 '22 at 07:02

score 3 · Accepted Answer · answered Mar 27 '22 at 07:14

As per this https://forum.serpapi.com/feature-requests/p/add-http-cors-headers serpapi doesn't allow cross-origin requests from the browsers

So you need to use this in Server side code only, You cannot consume this API in React or any frontend application

For example To get https://serpapi.com/search.json?engine=google_jobs&q=internship+new+delhi&hl=en&api_key=xxxxxx"

You need to create a endpoint in server side yourdomain.com/requiredparams that takes params and pass to https://serpapi.com/search.json and request data

So instead of calling serpapi you call your own API and Server will make request to serpapi and give response If you follow this way your API key is also safe

How do I fix CORS Error when Trying to fetch data from SERP API into my react app

1 Answers1