javascript 获取我的代码的CORS标题缺失错误[重复]

63lcw9qa  于 11个月前  发布在  Java
关注(0)|答案(3)|浏览(121)

此问题在此处已有答案

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头丢失的问题。

q3aa0525

q3aa05251#

这意味着“coingecko”已经禁用了CORS头,可能是因为你正在做的事情,即在没有事先联系的情况下将API调用嵌入到你的网站中:)

ymzxtsji

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。

vwhgwdsa

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 - * 您可以查看互联网上的多个资源,了解如何在特定服务器上添加白名单域。*
希望这对你有帮助。

相关问题