时间戳

首页 > 解决方案 > laravel 5.6 - 带有 Laravel API 的 vuejs SPA

php - laravel 5.6 - 带有 Laravel API 的 vuejs SPA

问题描述

我正在使用laravel 5.6. 我有一个场景，我需要创建另一个文件夹来vuejs独立于laravel. 所以现在我有：

laravel将 api 提供get/post给数据库：

- www.example.com/sample_api/{id}
- www.example.com/sample_api2/
...

并使用cors中间件设置：

<?php

namespace App\Http\Middleware;

use Closure;
class Cors
{
    public function handle($request, Closure $next)
    {
        $allowedOrigins = ['http://myroute.xyz', 'http://clarkconcepts.net','http://localhost'];
        $origin = isset($_SERVER['HTTP_ORIGIN']) ? $_SERVER['HTTP_ORIGIN'] : '';
        if (in_array($origin, $allowedOrigins)) {
            return $next($request)
                ->header('Access-Control-Allow-Origin', $origin)
                ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS')
                ->header('Access-Control-Allow-Headers',' Origin, Content-Type, Accept, Authorization, X-Request-With, cache-control,postman-token, token')
                ->header('Access-Control-Allow-Credentials',' true');
        }
        return $next($request);
    }
}

我可以get从laravelapi，但不是post. 当我post通过以下方式时，我总是得到这个api：

从源“ http://localhost:8080 ”访问“ http://localhost:8000/posttest ”的 XMLHttpRequest已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：没有“访问控制” -Allow-Origin' 标头出现在请求的资源上。

这localhost:8000是 laravel 服务器，localhost:8080是vuejs. 我怀疑这是因为我在 I 时错过了标题post，但我不确定在这种情况下该怎么做。

更新1

按照@phil的建议，我添加localhost:8080了$allowedOrigins这样的内容：

$allowedOrigins = ['http://myroute.xyz', 'http://clarkconcepts.net','http://localhost','http://localhost:8080'];

现在看来我可以摆脱预检问题但出现新错误： 在此处输入图像描述

做了一些谷歌，似乎是 CSRF 令牌问题。我现在很困惑，我想是因为我不能使用 CSRF Token，这就是为什么Cors中间件的所有麻烦。

无论如何，有没有办法解决这个问题？或如何将 CSRF 令牌添加laravel到vuejsSPA 站点？

标签： phplaravelvue.js

解决方案

推荐阅读