Angular Sanctum 基于会话的跨域 CSRF Cookie答案

【问题标题】：Angular Sanctum Session-base Cross Domain CSRF CookieAngular Sanctum 基于会话的跨域 CSRF Cookie
【发布时间】：2021-08-16 11:29:32
【问题描述】：

我正在尝试使用 Angular 10 为前端和 sanctum + Fortify 为后端制作一个 SPA 应用程序

我设法在本地主机上登录

但是当我与我的团队合作时，我们正在本地主机网络上工作

例如

192.168.43.68:4200 is angular app 

192.168.43.74:8000 is Laravel app

我不知道如何测试这些应用程序

我正在寻找 .env、sesssion.php、sanctum.php 和 foritfy.php 的正确配置

或者如果 Angular 应用程序需要代理来自动 Laravel 制作 cookie 您的帮助将不胜感激。

【问题讨论】：

标签： angular laravel csrf fortify laravel-sanctum

【解决方案1】：

玩了一段时间后，我设法解决了它

要在开发模式下测试此应用程序，您必须在 angular.json 旁边创建一个代理文件名称为 proxy.conf.json

然后在此文件中设置必须代理的 URL（在我的情况下，我想代理所有以 /api 和 /sanctum 开头的 URL 用于 csrf）

{
    "/sanctum/*": {
        "target": "http://192.168.43.74:8000/",
        "secure": false,
        "changeOrigin": true,
        "logLevel": "debug",
        "pathRewrite": {
            "^/api": ""
        }
    },
    "/api/*": {
        "target": "http://192.168.43.74:8000/",
        "secure": false,
        "changeOrigin": true,
        "logLevel": "debug",
        "pathRewrite": {
            "^/": ""
        }
    }
}

然后在 Architect->serve->option 这样的 angular.json 中导入这个代理

 "options": {
            "browserTarget": "fuse:build",
             "proxyConfig": "proxy.conf.json"
            }

那么你就可以用这个命令运行项目了

ng 服务 --proxy-config proxy.conf.json

或者为了方便你可以把它放在开始的Package.json中

"start": "ng serve --proxy-config proxy.conf.json"

并使用 npm start 运行您的服务器

【讨论】：