1. 程式人生 > >Laravel開啟跨域請求

Laravel開啟跨域請求

專案中用到了介面,外部呼叫的時候老是請求不到,本地請求卻沒問題,查了下說是因為跨域的問題。
根據網上所說解決方法如下:

1、
建立中介軟體Cors.php
命令:php artisan make:middleware Cors
/app/Http/Middleware/ 目錄下會出現一個Cors.php 檔案。

2、
handle 方法中加入如下內容:


        $response = $next($request);
        $response->header('Access-Control-Allow-Origin', '*');
        $response
->header('Access-Control-Allow-Headers', 'Origin, Content-Type, Cookie, Accept, multipart/form-data, application/json'); $response->header('Access-Control-Allow-Methods', 'GET, POST, PATCH, PUT, OPTIONS'); $response->header('Access-Control-Allow-Credentials', 'false'); return
$response;

其中有以下需要注意的地方:

  • 對於跨域訪問並需要伴隨認證資訊的請求,需要在 XMLHttpRequest 例項中指定 withCredentials 為 true。
  • 這個中介軟體你可以根據自己的需求進行構建,如果需要在請求中伴隨認證資訊(包含 cookie,session)那麼你就需要指定 Access-Control-Allow-Credentials 為 true, 因為對於預請求來說如果你未指定該響應頭,那麼瀏覽器會直接忽略該響應。
  • 在響應中指定 Access-Control-Allow-Credentials 為 true 時,Access-Control-Allow-Origin 不能指定為 *(這個一定要注意,我就是在這個地方調了好久
  • 後置中介軟體只有在正常響應時才會被追加響應頭,而如果出現異常,這時響應是不會經過中介軟體的。

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)
    {
        $response = $next($request);
        $response->header('Access-Control-Allow-Origin', '*');
        $response->header('Access-Control-Allow-Headers', 'Origin, Content-Type, Cookie, Accept, multipart/form-data, application/json');
        $response->header('Access-Control-Allow-Methods', 'GET, POST, PATCH, PUT, OPTIONS');
        $response->header('Access-Control-Allow-Credentials', 'false');
        return $response;
    }
}

3、在 Kernel.php檔案中的$middleware中加入剛剛新增的中介軟體:\App\Http\Middleware\Cors::class,

如:


    protected $middleware = [
        \Illuminate\Foundation\Http\Middleware\CheckForMaintenanceMode::class,
        \App\Http\Middleware\EncryptCookies::class,
        \Illuminate\Cookie\Middleware\AddQueuedCookiesToResponse::class,
        \Illuminate\Session\Middleware\StartSession::class,
        \Illuminate\View\Middleware\ShareErrorsFromSession::class,
        \App\Http\Middleware\Cors::class,
    ];

以下內容為網路摘抄:

跨源資源共享標準

跨源資源共享標準通過新增一系列 HTTP 頭,讓伺服器能宣告哪些來源可以通過瀏覽器訪問該伺服器上的資源。另外,對哪些會對伺服器資料造成破壞性響應的 HTTP 請求方法(特別是 GET 以外的 HTTP 方法,或者搭配某些 MIME 型別的 POST 請求),標準強烈要求瀏覽器必須先以 OPTIONS 請求方式傳送一個預請求(preflight request),從而獲取知伺服器端對跨源請求所支援 HTTP 方法。在確認伺服器允許跨源請求的情況下,以實際的 HTTP 請求方法傳送那個真正的請求。伺服器端也可以通知客戶端,是不是需要隨同請求一起傳送信用資訊(包括 Cookies 和 HTTP 認證相關資料)。

跨源共享標準需要瀏覽器和服務端共同配合才能完成,目前瀏覽器廠商已經可以將請求部分自動完成,所以跨源資源訪問的重點還是在於伺服器端。

下面列出一些標準中可用的響應頭和請求頭。

Response Header

Access-Control-Allow-Origin : 指明哪些請求源被允許訪問資源,值可以為 “*”,”null”,或者單個源地址。

Access-Control-Allow-Credentials : 指明當請求中省略 creadentials 標識時響應是否暴露。對於預請求來說,它表明實際的請求中可以包含使用者憑證。

Access-Control-Expose-Headers : 指明哪些頭資訊可以安全的暴露給 CORS API 規範的 API。

Access-Control-Max-Age : 指明預請求可以在預請求快取中存放多久。

Access-Control-Allow-Methods : 對於預請求來說,哪些請求方式可以用於實際的請求。

Access-Control-Allow-Headers : 對於預請求來說,指明瞭哪些頭資訊可以用於實際的請求中。

Origin : 指明預請求或者跨域請求的來源。

Access-Control-Request-Method : 對於預請求來說,指明哪些預請求中的請求方式可以被用在實際的請求中。

Access-Control-Request-Headers : 指明預請求中的哪些頭資訊可以用於實際的請求中。

Request Header

Origin : 表明傳送請求或預請求的來源。

Access-Control-Request-Method : 在傳送預請求時帶該請求頭,表明實際的請求將使用的請求方式。

Access-Control-Request-Headers : 在傳送預請求時帶有該請求頭,表明實際的請求將攜帶的請求頭。