Question

我尝试从政府网站调用 api 以获取该密码中可用的 covid 疫苗。我在名为 searchbypinapi.js 的文件中创建了一个带有 api 调用的函数，并在 Pindiv.jsx 中导入并使用了该函数。 （我发布了两个文件的代码）

searchbypinapi.js

import axios from 'axios';

const Searchbypinapi = (pincode) => {
    
    var today = new Date();
    var date = today.toJSON().slice(0, 10);
    var nDate = date.slice(8, 10) + '-' + date.slice(5, 7) + '-' + date.slice(0, 4);
    let pincodeconfig = {
        method: 'get',
        url: 'https://cdn-api.co-vin.in/api/v2/appointment/sessions/public/calendarByPin?pincode=' + pincode +'&date=' + nDate ,
        headers: {
            'accept': 'application/json',
            'Accept-Language': 'hi_IN',
            'User-Agent': 'covid19'
        }
      };
      axios(pincodeconfig)
          .then((response) => {
            return(response.data);
          })
          .catch(error => {
              return error;
          });

      
      
};

export default Searchbypinapi;

Pindiv.jsx

import React, { useState } from 'react';
import Searchbypinapi from '../../api/searchbypinapi';

const Pindiv = () => {

    const [input, setInput] = useState("");

    const handleChange = (event) => {
        setInput(event.target.value);
    }

    const handleClick = (event) => {
        Searchbypinapi(input)
            .then((data) => {
                console.log(data);
            });
    }

    return (
        <div id="pincode" className="pinsearch d-flex justify-content-center">
            <div class="example">
                    <input type="text" autoComplete="off" onChange={handleChange} placeholder="Search.." name="search" />
                    <button type="button" onClick={handleClick} ><i class="fa fa-search"></i></button>
            </div>

            
        </div>
    )
}

export default Pindiv

当我在反应中调用 api 时，它给出了错误：-

click here to see the error screenshot

但是当我在 nodejs 中运行相同的 api 时，它 console.log() 数据成功。

我很困惑，因为它没有在 reactjs 中运行。请建议我对此的任何解决方案，或者我应该创建一个服务器文件夹来创建 api 请求，然后使用 axios 将其发送到客户端。

注意：- 我还使用了其他 api，例如 (https://api.covid19india.org/data.json) 它们运行良好，只有这个 api 没有运行。

Answer 1

您的请求因 CORS（跨域请求共享）而被阻止。

第 3 方服务器（在本例中为 co-vin.in）确定可以访问服务器的来源（其他网站）。显然您的网站不被允许。

但是，CORS 由浏览器强制执行。这就是为什么您的请求在浏览器（您的 React 应用程序）上不起作用，但在您的服务器上起作用的原因。

作为一种解决方案，您可以通过您的服务器代理请求，正如您已经建议的那样。

我应该从节点（服务器端）还是反应（客户端）调用 api？

1 个答案: