分类
Laravel

解决Laravel的API跨域请求问题

在使用laravel提供api服务时,是要允许跨域的,不然的浏览器里的JS是获取不到api接口的响应信息的,会报如下错误:

jquery.min.js:5 Cross-Origin Read Blocking (CORB) blocked cross-origin response http://127.0.0.1:8000/api/test with MIME type application/json. See https://www.chromestatus.com/feature/5629709824032768 for more details.

跨域在单纯的php里面是很好处理的,只要在页面头部加一个http header就行,代码 header('Access-Control-Allow-Origin: *');

<?php
header("Content-type:application/json; charset=utf-8");
header('Access-Control-Allow-Origin: *');

echo json_encode(['msg'=>'this message come from the api server.']);

为了让laravel能够响应跨域请求,今天网络上查找了很长时间,得到如下解决方案

  • 创建中间件:php artisan make:middleware Cors,生成的文件路径:app/Http/Middleware/Cors.php
  • 修改刚才创建的中间件,修改handle函数如下:
public function handle($request, Closure $next)
{
    return $next($request)
        ->header('Access-Control-Allow-Origin', '*')
        ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
}
  • 最后把这个中间件添加到 app/Http/Kernel.php 里面的middlewareGroups 的api分组里
'api' => [
    
    'throttle:60,1',
    'bindings',
    \App\Http\Middleware\Cors::class,
],

添加完成后,再测试就能收到从api返回的响应内容了。


还有一种方法是使用barryvdh/laravel-cors这个包(github: https://github.com/barryvdh/laravel-cors ),但是我在折腾很长时间之后也没能实现跨域请求,所以放弃了这种方法。

注:本文所用的Laravel版本为Laravel 6.7。

发表评论

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