CORS 策略已阻止访问获取：请求的资源上不存在“Access-Control-Allow-Origin”标头答案

【问题标题】：Access to fetch has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resourceCORS 策略已阻止访问获取：请求的资源上不存在“Access-Control-Allow-Origin”标头
【发布时间】：2026-01-24 15:15:02
【问题描述】：

我正在使用带有 gatsby 前端的 laravel 后端。我想通过 axios http get 请求从 laravel 后端的公共文件夹中获取图像。

这是我的 CORS 中间件

        $response = $next($request);

    $response->headers->set('Access-Control-Allow-Origin' , '*');
    $response->headers->set('Access-Control-Expose-Headers' , 'Access-Control-Allow-Origin');
    $response->headers->set('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT, PATCH, DELETE');
    $response->headers->set('Access-Control-Allow-Headers', 'Access-Control-Allow-Headers, Origin,Accept, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers,X-Access-Token,XKey,Authorization');

    return $response;

下面是获取请求

      fetch("https://quickrent.herokuapp.com/images/posts/20190506162816.jpg", {method:'GET'})
        .then(response => response.text())
        .then(result => console.log(result))
        .catch(error => console.log('error', error));
    }

【问题讨论】：

标签： javascript reactjs laravel api gatsby

【解决方案1】：

我在响应标头集中没有看到Access-Control-Allow-Origin。你确定你在 Laravel 中做对了吗？

【讨论】：

谢谢vitkarpov，是的，当使用javascript fetch请求时使用浏览器url访问时，图像会显示出来，它被CORS阻止

【解决方案2】：

在你的中间件中试试这个：

header('Access-Control-Allow-Origin: *');
        header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
        header('Access-Control-Allow-Headers: Content-Type, Accept, Authorization, X-Requested-With, X-Auth-Token, Origin, Application');
        return $next($request);

内核.php

protected $routeMiddleware = [
    'cors' => \App\Http\Middleware\Cors::class,

如果有帮助，请告诉我！或者你可以在这里看到 Laravel 5.1 API Enable Cors

【讨论】：