关于Laravel跨域的那些事

由于安全性的问题,浏览器会禁止JavaScript中的跨域请求

由于 XMLHttpRequest 遵循同源策略,所有使用 XMLHttpRequest 构造 HTTP 请求的应用只能访问自己的域名,如果需要构造跨域请求应用,则需要配合浏览器在HTTP头做一些允许跨域的配置。

刚好最近在写的DDStation需要开放接口给其他的一些朋友使用,而且开发版中将前端改用vue.js编写以减少服务器负担,所以解决跨域问题则显得尤为重要

由于跨源共享标准需要浏览器和后端共同实现,浏览器不是大问题,后端是使用laravel5.7编写的,所以解决这个问题倒不是什么太大的工程,后端接口功能代码很简单,仅仅是查询数据return而已 ,只需要编写一个中间件去追加跨域用的响应头,当然我们也可以使用jsonp去解决,不过,中间件对于我来说更加实用

在PHP原生中仅需添加响应头就可实现增查接口的跨域:

header( "Access-Control-Allow-Origin:*" );

header( "Access-Control-Allow-Methods:POST,GET" );

如果有更多的需求,则可以添加对应的响应头:

  • 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 : 指明预请求中的哪些头信息可以用于实际的请求中。

回到DDStation的项目上来,我仅需要给我的朋友们和我的网站前端Vue.js使用这个接口,这个接口仅仅是用于查询数据,那么很简单了

先在route中添加路由,并使用对应的中间件,我这里为EnableCross

接着使用artisan创建中间件EnableCross并在 Kernel.php中添加到需要用到的地方,具体步骤就不说了

接下来开始编写中间件:

public function handle($request, Closure $next)
    {

        $response = $next($request);
        $response->header('Access-Control-Allow-Origin', config('app.allow'));
        $response->header('Access-Control-Allow-Headers', 'Origin, Content-Type, Cookie, Accept');
        $response->header('Access-Control-Allow-Methods', 'GET, POST, PATCH, PUT, OPTIONS');
        $response->header('Access-Control-Allow-Credentials', 'true');
        return $response;
    }

编写完了中间件以后再到config目录下app.php中新建一个allow的配置项

'allow' => env('ENABLE_CROSS', 'NULL'),

接着在应用根目录下.env文件内添加你允许跨域的域名,举例:

ENABLE_CROSS="https://dd.jitui.moe"

至此laravel的允许跨域工作就已经做完了,需要注意的是.env在laravel默认中会被git忽略,在部署的时候请注意配置好.env

发表评论

电子邮件地址不会被公开。 必填项已用*标注