错误：请求失败：401 - 未经授权的 API 请求 React

Question

我正在尝试在我的前端项目中使用 API。我正在使用

React/Typescript

。 在

api

的文档中提到，授权使用名称为

token

的密钥，该密钥也有

value

，据说使用授权作为标头。

我正在使用

.env

文件作为令牌的值。

这是我现在的代码：

// defining baseUrl and apiKey
const API_BASE_URL = "somevalue";
const apiKey = process.env.API_KEY;
const apiToken = `Bearer ${apiKey}`;
interface RequestOptions {
  method: string;
  body?: FormData | null;
}

// makeRequest function to handle the common logic for making API requests.
async function makeRequest(
  url: string,
  options: RequestOptions = { method: "GET" }
) {
  const headers = {
    Authorization: apiToken, 
    'key': 'token',// Pass the token in the 'Authorization' header
    'Content-Type': 'application/json',
    
  };
  console.log('Headers:', headers);

  try {
    const response = await fetch(url, {
      method: options.method,
      headers,
      body: options.body,
    });
    if (!response.ok) {
      throw new Error(
        `Request failed: ${response.status} - ${response.statusText}`
      );
    }
    return await response.json();
  } catch (error) {
    throw new Error(`An error occurred: ${error.message}`);
  }
}
export async function getPosts(
  page: number,
  perPage: number,
  sortBy: string,
  sortDirection: string,
  searchPhrase: string,
  categoryId: number
) {
  const url = new URL(`${API_BASE_URL}/posts`);
  url.searchParams.append("page", page.toString());
  url.searchParams.append("perPage", perPage.toString());
  url.searchParams.append("sortBy", sortBy);
  url.searchParams.append("sortDirection", sortDirection);
  url.searchParams.append("searchPhrase", searchPhrase);
  url.searchParams.append("categoryId", categoryId.toString());

  return makeRequest(url.toString());
}

export async function createPost(
  title: string,
  content: string,
  category_id: number,
  image: File
) {
  const url = `${API_BASE_URL}/posts`;

  const formData = new FormData();
  formData.append("title", title);
  formData.append("content", content);
  formData.append("category_id", category_id.toString());
  formData.append("image", image);

  return makeRequest(url, { method: "POST", body: formData });
}

export async function getCategories() {
  const url = new URL(`${API_BASE_URL}/categories`);
  return makeRequest(url.toString());
}

这就是我尝试在网站的另一个页面中使用该功能时得到的结果：

Error: An error occurred: Request failed: 401 - Unauthorized

Answer 1

您必须创建以 REACT_APP_ 开头的自定义环境变量

除

NODE_ENV

之外的任何其他变量都将被忽略，以避免意外暴露机器上可能具有相同名称的私钥。

在

.env

中使用密钥不是一个好习惯，因为它会在你的 JS 中暴露为

process.env.REACT_APP_API_KEY