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

Posted 2023-03-04

【中文标题】CORS 策略已阻止从源“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

【发布时间】：2021-01-24 18:39:12

【问题描述】：

我想使用 Laravel 从后端获取我的 Reacjs 应用程序中的列表。当我在 Reactjs 组件中调用 Api 时，它给了我这个错误消息

**从源“http://localhost:3000”获取“http://localhost:8000/api/puppies”的访问权限已被 CORS 策略阻止：“Access-Control-Allow-Origin”标头包含多个值 ', '，但只允许一个。让服务器发送带有有效值的标头，或者，如果不透明的响应满足您的需要，请将请求的模式设置为“no-cors”以获取禁用 CORS 的资源。

我在后端 Laravel CORS 中创建了一个中间件

cors 中间件

<?php
  namespace App\Http\Middleware;
  use Closure;
  class Cors
  
  /**
  * Handle an incoming request.
  *
  * @param  \Illuminate\Http\Request  $request
  * @param  \Closure  $next
  * @return mixed
  */
   public function handle($request, Closure $next)
  
    return $next($request)
     ->header('Access-Control-Allow-Origin', "*")
     ->header('Access-Control-Allow-Methods', "PUT, POST, DELETE, GET, OPTIONS")
     ->header('Access-Control-Allow-Headers', "Accept,Authorization,Content-Type");
  
 

我的 API 路由

Route::apiResource('puppies', 'Api\PuppiesController');

前端代码

我的卡片js API

import React, useState, useEffect  from 'react';
import Link from 'react-router-dom';
import getPuppies from "./apiCore";

const Card = () => 
const [allPets, setAllPets] = useState([]);

const loadAllPets = () => 
    getPuppies().then(data => 
        if(data.error)
            console.log(data.error)
         else
            setAllPets(data)
        
    );
;

useEffect(() =>
    loadAllPets();
, [])

return(
    <div>
        <div className="row">
            <div className="col-lg-4 col-md-6 col-12">
                /* <div className="listing-block">
                    <div className="listing-image">
                        <img src="img/listing.jpg" />
                    </div>
                    <div className="listing-content">
                        <div className="tag ondeposite">ON Deposite</div>
                        <h3>Golden Retriver</h3>
                        <h4>Poodele, 4 Weeks</h4>
                        <Link to="/description" className="boxed-btn3">View Puppy</Link>
                    </div>
                </div> */
                JSON.stringify(allPets)
            </div>
        </div>
    </div>
   )
   
   export default Card;

API

import API from "../config";
export const getPuppies = () =>
const url = "http://localhost:8000/api/puppies"
return fetch(url, 
  method: "GET",
)
.then(response =>
 return response.json();      
)
.catch(err =>
  console.log(err);
  );
 ;

为了更清楚，请查找附件图像。 请帮忙 提前致谢。

【问题讨论】：

你获取pippies的后端代码是什么？

我在 Laravel 中使用 Laravel 资源集合的后端

有什么更新吗？或发布解决方案？

是的，现在工作正常............我通过使用中间件来做到这一点

【参考方案1】：

我认为您可以在浏览器中安装此扩展程序：

Extension : Allow CORS: Access-Control-Allow-Origin