CORS策略Laravel和React已阻止从源地址'http：// localhost：3000'访问'http：// localhost：8000 / api / puppies'的访问

如何解决CORS策略Laravel和React已阻止从源地址'http：// localhost：3000'访问'http：// localhost：8000 / api / puppies'的访问

我尝试在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);
});

};

请帮助。

解决方法

这是服务器端错误。您需要在服务器端API中设置CORS。

如果您使用的是expressjs，则可以使用this

进行设置