嘿,伙计们,我试图在vitejs(React)与axios get方法调用API,但我得到CORS错误(XMLHttpRequest)

quhf5bfb  于 2023-03-29  发布在  iOS
关注(0)|答案(1)|浏览(213)

完整错误(从源'http://127.0.0.1:5173'访问'https://api.themoviedb.org/3/movie/popular'的XMLHttpRequest已被CORS策略阻止:对印前检查请求的响应未通过访问控制检查:请求的资源上不存在“Access-Control-Allow-Origin”标头。GET https://api.themoviedb.org/3/movie/popular net::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));
  };
}

在Postman中,当我尝试发送get请求时,响应在那里,但在localhost中发生此错误。
我尝试添加“Access-Control-Allow-Origin”:“*”头,并尝试了一些cors扩展来绕过cors错误,但仍然发生错误。

7qhs6swi

7qhs6swi1#

我认为CORS错误可以从你的API设置中修复,而不是在你的React应用程序中。需要有一个部分将你的请求服务器IP或域名放在你的API设置中,至少大多数API都有一个。CORS大多被后端阻止,以保护API免受XSS攻击。如果你有任何部分在上面写你的请求服务器IP或域名,你应该检查API管理页面吗?
它可能是您需要的应用程序URL部分。当您在帐户上创建API应用程序时,它会询问。

相关问题