解决 Laravel 接收非简单请求时,只有收到 OPTIONS 请求的问题

错误讯息

No 'Access-Control-Allow-Origin' header is present on the requested resource.

解决方法 1

在 Laravel 安装 laravel-cors,即可解决。

composer require barryvdh/laravel-cors

解决方法 2

引用 Laravel处理OPTIONS请求的原理探索及批量处理方案

新增中间件 app\Http\Middleware\Cors.php

发送非简单请求时,伺服器端会先收到一个 OPTIONS 的预请求,前端只有收到这个预请求的正常回应,才会发送正式的 POST 请求。

<?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)
    {
        $response = $next($request);

        $response->header('Access-Control-Allow-Origin', '*');

        if ($request->getMethod() === 'OPTIONS') {
            $response->header('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH, DELETE, OPTIONS');
            $response->header('Access-Control-Allow-Credentials', 'true');
            $response->header('Access-Control-Allow-Headers', 'Authorization, Content-Type, X-PINGOTHER');
        }

        return $response;
    }
}

开启 app\Http\Kernel.php,新增:

protected $middleware = [
    ...

    \App\Http\Middleware\Cors::class,
];
本作品采用《CC 协议》,转载必须注明作者和本文链接
即使是一颗小星星,也会闪耀着光芒~~
《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L05 电商实战》
从零开发一个电商项目,功能包括电商后台、商品 & SKU 管理、购物车、订单管理、支付宝支付、微信支付、订单退款流程、优惠券等
讨论数量: 2

把下面这段放在app\Http\Middleware\Cors.php文件里可以吗?不用加2个中间件

if ($request->getMethod() === 'OPTIONS') {
            $response->header('Access-Control-Allow-Origin', '*');
            $response->header('Access-Control-Allow-Methods', 'GET, POST, PUT, PATCH, DELETE, OPTIONS');
            $response->header('Access-Control-Allow-Credentials', 'true');
            $response->header('Access-Control-Allow-Headers', 'Authorization, Content-Type, X-PINGOTHER');
        }
5年前 评论

@lovecn 可以,原本的作法纯属我个人想太多

5年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!