Webman使用阿里云SLB存在跨域問題

Tinywan 更新于2021-12-15

阿里云SLB配置

跨域截圖

官方中間件也使用了

http://m.wtbis.cn/doc/webman/middleware.html

middleware.php 配置

return [
    '' => [
        \app\middleware\AccessControlMiddleware::class,
    ]
];

AccessControlMiddleware

declare(strict_types=1);

namespace app\middleware;

use Webman\MiddlewareInterface;
use Webman\Http\Response;
use Webman\Http\Request;

class AccessControlMiddleware implements MiddlewareInterface
{
    /**
     * @param Request $request
     * @param callable $next
     * @return Response
     */
    public function process(Request $request, callable $next): Response
    {
        $response = $request->method() == 'OPTIONS' ? response('') : $next($request);
        $response->withHeaders([
            'Access-Control-Allow-Origin' => '*',
            'Access-Control-Allow-Headers' => 'Authorization, Content-Type, If-Match, If-Modified-Since, If-None-Match, If-Unmodified-Since, X-Requested-With,Origin',
            'Access-Control-Allow-Methods' => 'GET,POST,PUT,DELETE,OPTIONS',
        ]);
        return $response;
    }
}

調(diào)試

var_dump(11111111111111);
$response = $request->method() == 'OPTIONS' ? response('') : $next($request);
var_dump(222222222222222);

使用Postman請求有打印

前端（Vue）請求沒有任何打印信息

 3873  2 1

2個回答

walkor 2021-12-15

打賞

是不是設(shè)置了路由，路由用any，不要用post，跨域請求可能有options請求，只設(shè)置post路由會導(dǎo)致跨域出現(xiàn)問題。

Tinywan 2021-12-15

post 修改成any 就可以了
walkor 2021-12-15

跨域的接口用Route::any()或者 Route::add(['POST', 'OPTIONS'])
Tinywan 2021-12-15

謝謝老大，我這邊嘗試一下
Tinywan 2021-12-17

這個路由會有一個問題，如果POST和PUT路徑一樣，同時使用 Route::add(['POST', 'OPTIONS'] 和 Route::add(['GET', 'OPTIONS'] ，系統(tǒng)會提示：FastRoute\BadRouteException: Cannot register two routes matching "/console/resources/(\d+)" for method "OPTIONS" in /vendor/nikic/fast-route/src/DataGenerator/RegexBasedAbstract.php:111
walkor 2021-12-17

Route::add(['POST', 'PUT', 'OPTIONS']); 放一起

Tinywan 2021-12-17

我這個多條路由

Route::group('/resources', function () {
    Route::get('', [ConsoleResource::class, 'getList']);
    Route::add(['POST', 'OPTIONS'],'', [ConsoleResource::class, 'create']);
    Route::put('/{id:\d+}', [ConsoleResource::class, 'update']);
    Route::delete('/{id:\d+}', [ConsoleResource::class, 'delete']);
    Route::add(['GET', 'OPTIONS'],'/{id:\d+}', [ConsoleResource::class, 'detail']);
    Route::add(['POST', 'OPTIONS'],'/{id:\d+}/authorize', [ConsoleResource::class, 'authorizeApi']);
});

Tinywan 2021-12-17

上面的路由 Route::put('/{id:\d+}', [ConsoleResource::class, 'update']); 由于這個正則 {id:\d+} 也跨域了
lscho 2021-12-17

單獨在/resources 這個分組下面注冊一個OPTIONS類型，匹配所有請求就可以了。OPTIONS請求的作用只是預(yù)檢而已。
Tinywan 2021-12-17

直接放在全局就也是可以的

// 匹配所有options路由
Route::options('[{path:.+}]', function (){
return response('');
});

walkor 2021-12-17

如果一個uri的put get post等需要單獨的action處理的，lscho 給的方案是正解，單獨設(shè)置一個options路由。

Route::group('/resources', function () {
    // 匹配 /resources 下的所有options路由
    Route::options('[{path:.+}]', function (){
        return response('');
    })->middleware([\app\middleware\跨域中間件類名::class]);
    // ........
});