那些遇到过的问题

不允许Lumen API CORS Ajax 405方法

Uli*_*ses 1 rest reactjs lumen axios

我在Laravel Lumen上有一个api，我们通过Postman和Ruby Rest Client进行了测试，一切都很好，但是我们创建了一个简单的Auth Login（响应登录），可以响应Web令牌，一切正常，但是在我们的React App上，我们实际上有“ 405 405不允许的方法”。

我们用下面的代码创建一个类：

<?php namespace palanik\lumen\Middleware;

use Closure;
use Illuminate\Http\Response;

class LumenCors {

    protected $settings = array(
                'origin' => '*',    // Wide Open!
                'allowMethods' => 'GET,HEAD,PUT,POST,DELETE,PATCH,OPTIONS',
                );

    protected function setOrigin($req, $rsp) {
        $origin = $this->settings['origin'];
        if (is_callable($origin)) {
            // Call origin callback with request origin
            $origin = call_user_func($origin,
                                    $req->header("Origin")
                                    );
        }
        $rsp->header('Access-Control-Allow-Origin', $origin);
    }

    protected function setExposeHeaders($req, $rsp) {
        if (isset($this->settings['exposeHeaders'])) {
            $exposeHeaders = $this->settings['exposeHeaders'];
            if (is_array($exposeHeaders)) {
                $exposeHeaders = implode(", ", $exposeHeaders);
            }

            $rsp->header('Access-Control-Expose-Headers', $exposeHeaders);
        }
    }

    protected function setMaxAge($req, $rsp) {
        if (isset($this->settings['maxAge'])) {
            $rsp->header('Access-Control-Max-Age', $this->settings['maxAge']);
        }
    }

    protected function setAllowCredentials($req, $rsp) {
        if (isset($this->settings['allowCredentials']) && $this->settings['allowCredentials'] === True) {
            $rsp->header('Access-Control-Allow-Credentials', 'true');
        }
    }

    protected function setAllowMethods($req, $rsp) {
        if (isset($this->settings['allowMethods'])) {
            $allowMethods = $this->settings['allowMethods'];
            if (is_array($allowMethods)) {
                $allowMethods = implode(", ", $allowMethods);
            }

            $rsp->header('Access-Control-Allow-Methods', $allowMethods);
        }
    }

    protected function setAllowHeaders($req, $rsp) {
        if (isset($this->settings['allowHeaders'])) {
            $allowHeaders = $this->settings['allowHeaders'];
            if (is_array($allowHeaders)) {
                $allowHeaders = implode(", ", $allowHeaders);
            }
        }
        else {  // Otherwise, use request headers
            $allowHeaders = $req->header("Access-Control-Request-Headers");
        }

        if (isset($allowHeaders)) {
            $rsp->header('Access-Control-Allow-Headers', $allowHeaders);
        }
    }

    protected function setCorsHeaders($req, $rsp) {

        // http://www.html5rocks.com/static/images/cors_server_flowchart.png
        // Pre-flight
        if ($req->isMethod('OPTIONS')) {
            $this->setOrigin($req, $rsp);
            $this->setMaxAge($req, $rsp);
            $this->setAllowCredentials($req, $rsp);
            $this->setAllowMethods($req, $rsp);
            $this->setAllowHeaders($req, $rsp);
        }
        else {
            $this->setOrigin($req, $rsp);
            $this->setExposeHeaders($req, $rsp);
            $this->setAllowCredentials($req, $rsp);
        }
    }

    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next) {

        if ($request->isMethod('OPTIONS')) {
            $response = new Response("", 200);
        }
        else {
            $response = $next($request);
        }

        $this->setCorsHeaders($request, $response);

        return $response;
    }

}
Run Code Online (Sandbox Code Playgroud)

我们添加bootstrap / app.php

$app->routeMiddleware([
    'auth' => App\Http\Middleware\Authenticate::class,
    'cors' => palanik\lumen\Middleware\LumenCors::class,
]);
Run Code Online (Sandbox Code Playgroud)

而我们的路线：

$app->group(['middleware' => 'cors'], function($app)
{
    $app->post('/auth/login', function() {
        return response()->json([
            'message' => 'CORS OPTIONS Accepted.',
        ]);
    });
});
Run Code Online (Sandbox Code Playgroud)

其余的客户端一切正常，但是我在React js应用程序上的说法是因为浏览器发送选项，请求不会传递到POST。

我们的Recat Axios请求：

axios({
    method: 'post',
    url: 'URL',
    data: {
            email: 'Fred',
            password: 'Flintstone'
    }
    }).then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });
Run Code Online (Sandbox Code Playgroud)

错误con反应日志：问题在于OPTIONS是在POST之前发送给浏览器的。标头响应：HTTP / 1.1 405不允许的方法允许：POST缓存控制：无缓存，私有Content-Type：text / html; charset = UTF-8日期：2017年10月29日，星期日01:30:34 GMT服务器：Apache / 2.4.18（Ubuntu）传输编码：分块连接：保持活动状态

我们的API缺少什么？

问候。

Pun*_*eet 5

在发送原始请求之前，React发送一个Http方法Options的请求，该方法检查API服务器是否接受了跨域请求？

以下是我遵循的方法：

添加方法的通配符路由 option

Route::options(
    '/{any:.*}', 
    [
        'middleware' => ['CorsMiddleware'], 
        function (){ 
            return response(['status' => 'success']); 
        }
    ]
);
Run Code Online (Sandbox Code Playgroud)

CorsMiddleware 是用于处理请求的中间件。

<?php 

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Response;

class CorsMiddleware
{
    protected $settings = array(
        'origin' => '*',    // Wide Open!
        'allowMethods' => 'GET,HEAD,PUT,POST,DELETE,PATCH,OPTIONS',
    );

    protected function setOrigin($req, $rsp) {
        $origin = $this->settings['origin'];
        if (is_callable($origin)) {
            // Call origin callback with request origin
            $origin = call_user_func($origin,
                        $req->header("Origin")
                    );
        }
        $rsp->header('Access-Control-Allow-Origin', $origin);
    }

    protected function setExposeHeaders($req, $rsp) {
        if (isset($this->settings['exposeHeaders'])) {
            $exposeHeaders = $this->settings['exposeHeaders'];
            if (is_array($exposeHeaders)) {
                $exposeHeaders = implode(", ", $exposeHeaders);
            }

            $rsp->header('Access-Control-Expose-Headers', $exposeHeaders);
        }
    }

    protected function setMaxAge($req, $rsp) {
        if (isset($this->settings['maxAge'])) {
            $rsp->header('Access-Control-Max-Age', $this->settings['maxAge']);
        }
    }

    protected function setAllowCredentials($req, $rsp) {
        if (isset($this->settings['allowCredentials']) && $this->settings['allowCredentials'] === True) {
            $rsp->header('Access-Control-Allow-Credentials', 'true');
        }
    }

    protected function setAllowMethods($req, $rsp) {
        if (isset($this->settings['allowMethods'])) {
            $allowMethods = $this->settings['allowMethods'];
            if (is_array($allowMethods)) {
                $allowMethods = implode(", ", $allowMethods);
            }

            $rsp->header('Access-Control-Allow-Methods', $allowMethods);
        }
    }

    protected function setAllowHeaders($req, $rsp) {
        if (isset($this->settings['allowHeaders'])) {
            $allowHeaders = $this->settings['allowHeaders'];
            if (is_array($allowHeaders)) {
                $allowHeaders = implode(", ", $allowHeaders);
            }
        }
        else {  // Otherwise, use request headers
            $allowHeaders = $req->header("Access-Control-Request-Headers");
        }
        if (isset($allowHeaders)) {
            $rsp->header('Access-Control-Allow-Headers', $allowHeaders);
        }
    }

    protected function setCorsHeaders($req, $rsp) {
        // http://www.html5rocks.com/static/images/cors_server_flowchart.png
        // Pre-flight
        if ($req->isMethod('OPTIONS')) {
            $this->setOrigin($req, $rsp);
            $this->setMaxAge($req, $rsp);
            $this->setAllowCredentials($req, $rsp);
            $this->setAllowMethods($req, $rsp);
            $this->setAllowHeaders($req, $rsp);
        }
        else {
            $this->setOrigin($req, $rsp);
            $this->setExposeHeaders($req, $rsp);
            $this->setAllowCredentials($req, $rsp);
        }
    }
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next) {
        if ($request->isMethod('OPTIONS')) {
            $response = new Response("", 200);
        }
        else {
            $response = $next($request);
        }
        $this->setCorsHeaders($request, $response);
        return $response;
    }
}
Run Code Online (Sandbox Code Playgroud)

加载中间件$app->routeMiddleware部分bootstrap/app.php

将所有应用程序URL保留在组中，以检查 CorsMiddleware

Route::group(['middleware' => 'CorsMiddleware'], function($router){
    $app->post('/auth/login', function() {
        return response()->json([
            'message' => 'CORS OPTIONS Accepted.',
        ]);
    });
}
Run Code Online (Sandbox Code Playgroud)

归档时间：

查看次数：

3692 次

最近记录：

8 年，2 月 前
相关归档
Apollo GraphQL React - 如何查询点击？ 55
反应警告：无法从不同组件的函数体内部更新组件 50
使用.map和索引进行反应 26
使用SharePoint 2013 REST API添加列表项 24
如何使用Restsharp反序列化Xml列表？ 9
使用 React Native、Expo ImagePicker、Rails、Axios 和 Paperclip 上传图片 7
WCF测试客户端错误:无法调用服务 5
无法通过SSH连接到Windows Azure虚拟机 5
Google Drive REST API：java.lang.IllegalArgumentException：名称不能为空：null 5
更新设置选项内 axios 响应回调中的反应数据 - Vue 3 2
难疑归档
如何使用正则表达式验证电子邮件地址？ 3201
使用Java创建内存泄漏 3076
为什么我不应该在PHP中使用mysql_*函数？ 2432
.prop()vs .attr() 2249
何时使用虚拟析构函数？ 1420
在YAML中,如何在多行中断字符串？ 1388
为什么我需要一直做`--set-upstream`？ 1364
JavaScript是一种传递引用还是按值传递的语言？ 1311
Tab键== 4个空格并在Vim中的花括号后自动缩进 1224
群集和非群集索引实际上意味着什么？ 1041