laravel 跨域解决方案

fzxfpp1314
404 阅读3分钟

本人已参与【新人创作礼】活动，一起开启掘金创作之路。

一、说明

本人最近是因为在用laravel框架编写的api接口，我这边把项目放到线上Linux服务器上后，但是前端vue项目调用我的API数据接口报跨域问题，之后我就开始查找资料并且解决后端的跨域问题，总之就一句话，一定要有耐心，同时也希望同行的技术伙伴如果有幸被你看到我写的这篇《laravel 跨域解决方案》的你可以给个关注+点赞+好评，也是支持鼓励我持续创作下去的动力。

二、应用

1.新建一个中间件

php artisan make:middleware EnableCrossRequestMiddleware

2、书写中间件内容

<?php
namespace App\Http\Middleware;
use Closure;
class EnableCrossRequestMiddleware{
    /**
     * @param $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://**.com',//允许访问
            'http://**.com',//允许访问
        ];
        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 数组变量就是你允许跨域的列表了，可自行修改。

3.然后在内核文件注册该中间件

protected $middleware = [
     // more
     App\Http\Middleware\EnableCrossRequestMiddleware::class,
 ];

在 App\Http\Kernel 类的 $middleware 属性添加，这里注册的中间件属于全局中间件。

然后你就会发现前端页面已经可以发送跨域请求了。

以下内容为网络查找的： 

 跨源资源共享标准 跨源资源共享标准通过新增一系列 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 : 在发送预请求时带有该请求头，表明实际的请求将携带的请求头。

会多出一次 method 为 options 的请求是正常的，因为浏览器要先判断该服务器是否允许该跨域请求。

avatar
文章
阅读
粉丝