尝试使用 Axios get 方法调用 vitejs(react) 中的 api，但出现 CORS 错误(XMLHttpRequest)

Question

完整错误（从源“http://127.0.0.1:5173”访问“https://api.themoviedb.org/3/movie/popular”处的 XMLHttpRequest 已被 CORS 策略阻止：响应预检请求未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。 https://api.themoviedb.org/3/movie/popularnet::ERR_FAILED）

axios 的配置文件

import axios from "axios";

const BASE_URL = "https://api.themoviedb.org/3";
const TMDB_TOKEN = import.meta.env.VITE_APP_TMDB_TOKEN;

const headers = {
  Autherization: "bearer" + TMDB_TOKEN,
  "Access-Control-Allow-Origin": "*",
  "Content-Type": "text/plain",
};

export const fetchDataFromApi = async (url, params) => {
  try {
    const { data } = await axios.get(BASE_URL + url, {
      headers,
      params,
    });

    return data;
  } catch (error) {
    console.log(error);
    return error;
  }
};

这就是我在 app.jsx 中调用函数的方式

function App() {
  useEffect(() => {
    apiTesting();
  }, []);

  const apiTesting = () => {
    fetchDataFromApi("/movie/popular").then((res) => console.log(res));
  };
}

在邮递员中，当我尝试发送获取请求时，响应就在那里，但在本地主机中会发生此错误。

我尝试添加“Access-Control-Allow-Origin”：“*”标头并尝试了一些cors扩展来绕过cors错误，但仍然出现错误。

Answer 1

我认为 CORS 错误可以通过 API 设置修复，而不是在 React 应用程序中修复。您的 API 设置中需要有一个部分来放置您的请求服务器 IP 或域名，至少大多数 API 都有一个。 CORS大多被后端屏蔽，以保护API免受XSS攻击。您是否应该检查API管理页面是否有任何部分可以在上面写入您的请求服务器IP或域名？

这可能是您需要的应用程序 URL 部分。当您在帐户上创建 API 应用程序时，它会询问。