反应：使用AXIOS不起作用的local主机呼叫外部API

Question

我正在使用NextJS制作一个简单的CRUD应用程序。该应用程序目前是本地的，尚未部署任何地方。我正在尝试对外部API进行API调用：

import axios from "axios";

let headers = {
    "token": process.env.NEXT_PUBLIC_BARCODELOOKUP_API_KEY,
};

export const getRecordInfoByBarcode = async (barcode) => {

    const searchByBarcode = `https://api.barcodelookup.com/v3/products?upc=${barcode}&formatted=y`;

    if (barcode === "" || barcode === undefined) {
        throw "Barcode cannot be empty!";
    }

    const res = await axios.get(searchByBarcode, { headers })
        .then(response => {
            console.log("response from barcodelookup");
            console.log(response);
        })
        .catch(e => console.log(e))
}

但是我会收到以下错误：

从'https://api.barcodelookup.com/v3/products?upc = 724381033210＆amp; formatted = y'访问xmlhttprequest'前飞行请求不传递访问控制检查：未在请求的资源上显示“访问控制”标题。

根据API的文档（ https://devapi.barcodespider.com/documentation.com/documentation ）标题中的令牌作为URL的一部分： https://api.barcodelookup.com/v3/products?token=xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxt = 0296667003315

我已经尝试过，无效。还尝试了我的后端应用程序（GO编写）的相同电话，但是我得到了相同的结果。

我可以从邮递员等REST客户端执行呼叫。

API文档没有提供注册我的应用程序的方法。

Answer 1

您是否尝试过记录process.env.next_public_barcodelookup_api_key到控制台？如果您已经使用Create React应用程序创建了应用程序，则需要将环境变量带有react_app的前缀，例如react_app_next_public_barcodelookulookup_api_key