CORS 策略已阻止访问 XMLHttpRequest - Laravel 5.8

Posted 2023-03-04

【中文标题】CORS 策略已阻止访问 XMLHttpRequest - Laravel 5.8

【英文标题】：Access to XMLHttpRequest has been blocked by CORS policy - Laravel 5.8

【发布时间】：2021-10-11 04:03:58

【问题描述】：

所以我知道这里的问题是我试图从example.com 向localhost 发送一个POST 请求。我不确定为什么这不起作用，据我所知，我已经通过核选项将所有内容添加到 Laravel。

在 Laravel 中，我在 public/index.php 中添加了以下内容：

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS'):

我知道这不是理想的方法，但是我在使用 Cors 中间件时也遇到了同样的问题。

我的客户端是一个使用 Axios 从浏览器发送 POST 请求的 React 应用程序，在网络选项卡中我可以看到以下内容：

我的 Axios 请求如下所示：

await axios(
  method: 'POST',
  url: 'http://localhost:8000/api/webhooks/platform',
  data: notification.data,
  headers: 
    Origin: 'https://example.com'
  
);

有人知道我哪里出错了吗？我的版本在下面，并且很严格。我无法更改这些：

  "php": "^7.1.3",
  "laravel/framework": "5.8.*",
  "laravel/nexmo-notification-channel": "^2.5",
  "laravel/tinker": "^1.0",
  "nexmo/laravel": "^2.4",

我尝试了this answer，但我得到了Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

app/Http/Middleware/Cors.php

<?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', 'GET, POST, PUT, DELETE, OPTIONS')
            ->header('Access-Control-Allow-Credentials', true)
            ->header('Access-Control-Allow-Headers', 'Authorization,Accept,Origin,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range');
    

内核.php

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

routes/api.php

Route::post('/webhooks/platform', 'WebhooksController@handlePlatformNotification') -> middleware('cors');

【参考方案1】：

尝试扩展您的解决方案，希望对您有所帮助：

header('Access-Control-Allow-Credentials', true)
header('Access-Control-Allow-Headers', 'X-Requested-With,Content-Type,X-Token-Auth,Authorization')

要实现所有这些“标题”逻辑，我建议您使用Laravel Middleware

如果您处理它并希望看到 CORS 问题的扩展和灵活解决 - 请查看 this 包

UPD：问题似乎出在“Access-Control-Allow-Origin”通配符上。 详情查看this答案

UPD2：顺便说一句，检查this。如果您自己的中间件甚至没有触发 - 中间件优先级问题

【讨论】：

所以我只是尝试使用中间件，将来源、方法、凭据和标头添加为中间件，但仍然遇到同样的问题。将使用代码更新问题

hmmm，当我遇到 CORS 问题时，我又遇到了另一个问题，即“Access-Control-Allow-Origin”通配符 (*)。没有它你能测试你的解决方案吗？

我不相信 Cors 的实现是否有效。查看对服务器的 OPTIONS 调用，响应中没有添加任何访问控制标头

中间件优先级可能有问题

是的，我也这么认为，但在顶部添加 Cors 并没有帮助:(