当试图将数据从SERP API中提取到我的react应用程序时，如何修复CORS错误？

Question

我试图从SERP API中获取数据以获取Job_Results，在postman上，我能够获取数据，但是当我尝试使用Axios获取数据时，即使在package.json中指定代理并传递适当的头部之后，也会出现CORS错误。

这是我的代码片段：

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
    );

Answer 1

根据这个https://forum.serpapi.com/feature-requests/p/add-http-cors-headers，serpapi不允许来自浏览器的跨源请求。

因此，您只需在服务器端代码中使用此API，就不能在React或任何前端应用程序中使用此API

例如，获取https://serpapi.com/search.json?engine=google_jobs&q=internship+new+delhi&hl=en&api_key=xxxxxx"

您需要在服务器端创建一个端点，您的domain.com/requiredparams接受params并传递给https://serpapi.com/search.json并请求数据

因此，您不必调用serpapi，而是调用您自己的API，如果您遵循这种方式，您的API键也是安全的，服务器将向serpapi发出请求并给出响应