跨域请求失败或跨域资源共享(CORS)问题通常在开发本地主机上的 Laravel vuejs SPA 应用程序时出现。CORS 策略是浏览器实现的一种安全机制,用于防止来自不同域的 JavaScript 代码访问本地主机资源。
要解决这个问题,最简单的方法是在 Laravel 响应头中添加跨域资源共享头信息。可以使用 Laravel 的中间件来完成此操作,如下所示:
首先,在 Laravel 应用程序中添加一个“cors”中间件。在终端中执行以下命令:
php artisan make:middleware Cors
然后,打开 app/Http/Middleware/Cors.php 文件,并将以下代码添加到 handle 方法中:
public function handle($request, Closure $next) { header("Access-Control-Allow-Origin: *"); header("Access-Control-Allow-Headers: *"); header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
return $next($request);
}
最后,将新中间件添加到应用程序的全局中间件列表中。在 app/Http/Kernel.php 文件的 $middlewareGroups 数组中添加以下行:
'cors' => \App\Http\Middleware\Cors::class,
现在,在 Vue.js 应用程序中发出跨域请求时,您应该可以成功访问本地主机资源。