CORS 策略 Laravel 和 React 已阻止访问从源“http://localhost:3000”获取“http://localhost:8000/api/puppies”答案

【问题标题】：Access to fetch at 'http://localhost:8000/api/puppies' from origin 'http://localhost:3000' has been blocked by CORS policy Laravel and ReactCORS 策略 Laravel 和 React 已阻止访问从源“http://localhost:3000”获取“http://localhost:8000/api/puppies”
【发布时间】：2021-01-23 19:14:20
【问题描述】：

我尝试在 Reacjs 组件中获取列表。我在 Laravel 中创建了我的 API，但是当我尝试获取一个列表时，它在控制台中给了我这个错误消息

**从源“http://localhost:3000”获取“http://localhost:8000/api/puppies”的访问权限已被 CORS 策略阻止：“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);
});

};

请帮忙。

【问题讨论】：

标签： reactjs laravel

【解决方案1】：

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

如果你使用的是expressjs，可以使用this进行设置

【讨论】：

感谢您的回答。我正在使用 Laravel，请问我该怎么做
您可以使用github.com/fruitcake/laravel-cors。我没有使用 Laravel 的经验，但这是 100% 的错误。如果合适，请将答案标记为正确
我有，但还是同样的问题