CORS Vue 和 OctoberCMS

Posted 2023-03-04

【中文标题】CORS Vue 和 OctoberCMS

【英文标题】：CORS Vue and OctoberCMS

【发布时间】：2020-04-26 14:07:44

【问题描述】：

对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。

我正在使用 Vue（VueX、vue-router、...）和 OctoberCMS 构建应用程序。我通过 MAMP 在本地为 API 和 APP 创建虚拟域。我在 OctoberCMS 中通过插件 'rluders-cors' 配置了所有 CORS。

Route::group(
    [
        'prefix' => 'api/v1',
        'middleware' => ['api','jwt.auth','\Barryvdh\Cors\HandleCors'],
    ],
    function () 
         // Routes here
    
);

当我部署到 VPS (Centos 6) 中时，我收到了来自浏览器的上述响应。我在 API 的 .htaccess 文件中添加了标头。当我通过浏览器直接打开 API 时（打开 jwt.auth 中间件），我得到了 .htaccess 文件中设置的所有标头。但在 App 中，就不行了。

我尝试使用 App 的主域（abc.example）从我的本地虚拟域（local.local）调用 API，它仍然有效。但是我尝试了本地App调用VPS中的主API，它不起作用。

请帮帮我！谢谢。

【问题讨论】：

这是失败的预检 OPTIONS 请求。直接从浏览器访问 API 不会触发 CORS，因此不会发送预检。当您尝试从应用程序中发出请求时，您应该能够在浏览器的开发人员工具的 Network 选项卡中看到 preflight OPTIONS 请求（如果没有，请尝试其他浏览器）。检查开发人员工具中的响应标头以检查返回的内容。错误消息表明该请求中缺少 Access-Control-Allow-Origin。

显示临时标题。我在 Chrome 和 Safari 浏览器中都没有任何 OPTIONS 请求

【参考方案1】：

所以我对路线的解决方案是寻找飞行前响应。因此，在请求数据中，如果它为空，我将发送预检响应（我认为任何字符串都可以）。然后是一个不为空的请求。这是我发现的最简单的解决方法。您仍然必须允许访问控制域。我通常将其设置为 all 并且始终有一个令牌系统来验证 GET 以外的方法。

Route::match(['POST', 'OPTIONS'],'api/update-todo', function(Request $req) 
$data = $req->input();
if (!empty($data)) 
    Todo::where('id', $data['id'])
        ->update([
        'name' => $data['name'],
        'description' => $data['description'],
        'status' => $data['status'] 
    ]);
    return response()->json([
        'Success' => $data,
    ]);
 else 
    return response()->json([
      'Success' => $req,
    ]);

);

【参考方案2】：

就我而言，它适用于：

Route::options('/any', function() 
   $headers = [
        //'Access-Control-Allow-Methods'=> 'POST, GET, OPTIONS, PUT, DELETE',
        'Access-Control-Allow-Headers'=> 'X-Requested-With, Content-Type, X-Auth-Token, Origin, Authorization'
   ];
   return \Response::make('You are connected to the API', 200, $headers);
)->where('any', '.*');