完整错误(从源'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错误,但仍然发生错误。
1条答案
按热度按时间7qhs6swi1#
我认为CORS错误可以从你的API设置中修复,而不是在你的React应用程序中。需要有一个部分将你的请求服务器IP或域名放在你的API设置中,至少大多数API都有一个。CORS大多被后端阻止,以保护API免受XSS攻击。如果你有任何部分在上面写你的请求服务器IP或域名,你应该检查API管理页面吗?
它可能是您需要的应用程序URL部分。当您在帐户上创建API应用程序时,它会询问。