Laravel 跨域解決方案
- 2020 年 2 月 12 日
- 筆記
我們在用 laravel
進行開發的時候,特別是前後端完全分離的時候,由於前端項目運行在自己機器的指定端口 (也可能是其他人的機器) , 例如 localhost:8000
, 而 laravel
程序又運行在另一個端口,這樣就跨域了,而由於瀏覽器的同源策略,跨域請求是非法的。其實這個問題很好解決,只需要添加一個中間件就可以了。
- 新建一個中間件 php artisan make:middleware EnableCrossRequestMiddleware
- 書寫中間件內容
-
<?php
-
namespace
AppHttpMiddleware;
-
use
Closure;
-
class
EnableCrossRequestMiddleware
-
{
-
/**
-
* Handle an incoming request.
-
*
-
*
@param
IlluminateHttpRequest $request
-
*
@param
Closure $next
-
*
@return
mixed
-
*/
-
public
function
handle($request, Closure $next)
-
{
-
$response = $next($request);
-
$origin = $request->server('HTTP_ORIGIN') ? $request->server('HTTP_ORIGIN') : '';
-
$allow_origin = [
-
'http://localhost:8000',
-
];
-
if (in_array($origin, $allow_origin)) {
-
$response->header('Access-Control-Allow-Origin', $origin);
-
$response->header('Access-Control-Allow-Headers', 'Origin, Content-Type, Cookie, X-CSRF-TOKEN, Accept, Authorization, X-XSRF-TOKEN');
-
$response->header('Access-Control-Expose-Headers', 'Authorization, authenticated');
-
$response->header('Access-Control-Allow-Methods', 'GET, POST, PATCH, PUT, OPTIONS');
-
$response->header('Access-Control-Allow-Credentials', 'true');
-
}
-
return $response;
-
}
-
}
$allow_origin
數組變量就是你允許跨域的列表了,可自行修改。 -
- 然後在內核文件註冊該中間件
-
protected $middleware = [
-
// more
-
AppHttpMiddlewareEnableCrossRequestMiddleware::class,
-
];
在
AppHttpKernel
類的$middleware
屬性添加,這裡註冊的中間件屬於全局中間件
。 -
然後你就會發現前端頁面已經可以發送跨域請求了。