此问题在此处已有答案:
No 'Access-Control-Allow-Origin' header is present on the requested resource—when trying to get data from a REST API(32个回答)
2天前关闭。
CORS策略已阻止从源“http://localhost:3000”访问位于“https://API.coingecko.com/API/v3/coins/markets?vs_currency=INR&order=market_cap_desc&per_page=100&page=1&sparkline=false”的XMLHttpRequest:所请求的资源上不存在“HTTP-Control-Allow-Origin”标头。
这是我的代码:
import axios from 'axios';
import React, { useEffect, useState } from 'react';
import { CoinList } from '../config/api';
import { CrytpoState } from '../CryptoContext';
import { Container, LinearProgress, Table, TableBody, TableCell, TableContainer, TableHead, TableRow, TextField, ThemeProvider, Typography, createTheme, makeStyles } from '@material-ui/core';
import { useNavigate} from "react-router-dom";
const CoinsTable = () => {
const [coins, setCoins] = useState([]);
const [loading, setLoading] = useState(false);
const [search, setSearch] = useState("");
const history=useNavigate();
const {currency}=CrytpoState();
const fetchCoins = async () => {
setLoading(true);
try {
const { data } = await axios.get(CoinList(currency),{crossDomain:true});
setCoins(data);
} catch (error) {
console.error("Error fetching coins:", error);
} finally {
setLoading(false);
}
};
console.log(coins);
useEffect(() => {
fetchCoins();
}, [currency])
const darkTheme= createTheme({
palette:{
primary:{
main:"#fff",
},
type:"dark",
},
});
const handleSearch=()=>{
return coins.filter(
(coin)=>
coin.name.toLowerCase().includes(search.toLowerCase()) || coin.symbol.toLowerCase().includes(search.toLowerCase())
);
};
const useStyles=makeStyles(()=>({
row:{
},
}));
const classes=useStyles();
return (
<ThemeProvider theme={darkTheme}>
<Container style={{
textAlign:"center"
}}>
<Typography
variant="h4"
style={{
margin:18,
fontFamily:"Montserrat",
}}>
CryptoCurrency Prices by Market Cap!
</Typography>
<TextField label="Search For a Crpto Currency..!" variant="outlined"
style={{
marginBottom:20,
width:"100%"
}}
onChange={(e)=>setSearch(e.target.value)}
/>
<TableContainer>
{loading?(
<LinearProgress style={{backgroundColor:"gold"}} />
) :(
<Table>
<TableHead style={{backgroundColor:"#EEBC1D"}}>
<TableRow>
{["Coin","Price","24h Change","Market Cap"].map((head)=>(
<TableCell
style={{
color:"black",
fontWeight:700,
fontFamily:"Montserrat",
}}
key={head}
align={head==="Coin"? "": "right"}
>{head}</TableCell>
))}
</TableRow>
</TableHead>
<TableBody>
{handleSearch().map((row)=>{
const profit=row.price_change_percentage_24h>0;
return(
<TableRow onClick={()=>history(`/coins/${row.id}`)}
className={classes.row}
key={row.name}>
<TableCell
component="th"
scope="row"
style={{
display:"flex",
gap:15,
}}>
<img
src={row?.image}
alt={row.name}
height="50"
style={{
marginBottom:10
}}
/>
<div
style={{
display:"flex",
flexDirection:"column",
}}>
<span style={{
textTransform:"uppercase",
fontSize:22,
}}>
{row.symbol}
</span>
<span
style={{color:"darkgrey"}}>
{row.name}
</span>
</div>
</TableCell>
</TableRow>
);
})}
</TableBody>
</Table>
)}
</TableContainer>
</Container>
</ThemeProvider>
)
}
字符串
任何帮助将不胜感激,因为我无法解决CORS头丢失的问题。
3条答案
按热度按时间q3aa05251#
这意味着“coingecko”已经禁用了CORS头,可能是因为你正在做的事情,即在没有事先联系的情况下将API调用嵌入到你的网站中:)
ymzxtsji2#
CORS是一个浏览器端的安全结构。当你的浏览器去做一个“fetch”或“axios”调用时,它首先向URL发送一个OPTIONS请求,它最终会对这个URL发出一个GET/POST/PUT/.请求。
浏览器查看OPTIONS请求的响应头。这就是服务器告诉浏览器“从以下站点获取是安全的:.....”-换句话说,“从来自以下站点的网页调用此服务器的API是安全的:....."。这种机制是服务器如何能够告诉浏览器哪些站点/页面可以安全地调用API。
例如,银行的服务器会指示只有从银行的网站(https://mybank.com)调用API才是安全的。任何在其他地址(例如https://myfakebank.com)上创建网页的人都可以调用银行的API服务器,但浏览器会抛出CORS错误,因为虚假网页不会从“有效”网站提供服务。
因此,在您的情况下,请查看浏览器的开发工具的NETWORK选项卡中对the API call的OPTIONS调用的RESPONSE的标头,看看它是否给出了适当的响应(即
Access-Control-Allow-Origin *
)。如果您尝试调用API的网页不在允许的来源列表中,那么你的浏览器就不会为了它自己(你自己)的安全而调用API。vwhgwdsa3#
CORS策略已阻止从来源“http://localhost:3000”访问位于“https://API.coingecko.com/api/v3/coins/markets?vs_currency=INR&order=market_cap_desc&per_page=100&page=1&sparkline=false”的XMLHttpRequest:请求的资源上不存在“访问控制允许来源”头。
让我们稍微了解一下这个错误:
您正在尝试从http://localhost:3000请求位于**https://api.coingecko.com/**的资源。这两个资源位于不同的域/源(一个位于
coingecko.com
,是托管在某个位置的服务器,另一个位于localhost
,只是您的客户端计算机)。什么是CORS?
CORS指跨原产地资源共享。
这是什么意思?
出于安全原因,浏览器会限制从脚本发起的跨源HTTP请求。例如,
fetch()
和XMLHttpRequest
遵循同源策略。这意味着使用这些API的Web应用程序只能从加载该应用程序的同一源请求资源,除非来自其他源的响应包含正确的CORS标头Source。如果您是团队中的前端开发人员,并且有一个单独的后端团队,则需要请求他们将
http://localhost:3000
添加到服务器中作为白名单来源之一。在他们完成此操作后,您将能够成功地从localhost
请求。如果您还处理后端代码,则只需在白名单域中添加
http://localhost:3000
即可。PS - * 您可以查看互联网上的多个资源,了解如何在特定服务器上添加白名单域。*
希望这对你有帮助。