问题描述
我尝试在Reacjs组件中获取列表。我在Laravel中创建了API,但是当我尝试获取列表时,会在控制台中显示此错误消息
**访问CORS策略已阻止从源“ http:// localhost:3000”获取“ http:// localhost:8000 / api / puppies”的访问:“ Access-Control-Allow-Origin”标头包含多个值“ ,”,但只允许一个。让服务器发送带有有效值的标头,或者,如果不透明的响应满足您的需求,请将请求的模式设置为“ no-cors”,以在禁用CORS的情况下获取资源。
我的卡组件文件
import React,{useState,useEffect} from 'react';
import {Link} from 'react-router-dom';
import {getPuppies} from "./apiCore";
const Card = () => {
const [allPets,setAllPets] = useState([]);
const [error,setError] = useState(false);
const loadAllPets = () => {
getPuppies().then(data => {
if(data.error){
setError(data.error)
} else{
setAllPets(data)
}
});
};
useEffect(() =>{
loadAllPets();
},[])
return(
<div>
<div className="row">
<div className="col-lg-4 col-md-6 col-12">
{JSON.stringify(allPets)}
</div>
</div>
</div>
)
}
export default Card;
apiCore.js
import {API} from "../config";
export const getPuppies = () =>{
return fetch(`http://localhost:8000/api/puppies`,{
method: "GET",})
.then(response =>{
return response.json();
})
.catch(err =>{
console.log(err);
});
};
请帮助。