Angular Sanctum 基于会话的跨域 CSRF Cookie

Question

我正在尝试制作一个 SPA 应用，Angular 10 用于前端，sanctum + Fortify 用于后端

我成功登录了本地主机

但是当我和我的团队一起工作时，我们在本地主机网络上工作

例如

192.168.43.68:4200 is angular app 

192.168.43.74:8000 is Laravel app

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

我正在寻找 .env、sesssion.php、[= 的正确配置35=] 和 foritfy.php

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

Answer 1

经过一段时间的尝试，我设法解决了这个问题

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

然后在这个文件中设置必须被代理的 URLs（在我的例子中，我想代理所有以 /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 serve --proxy-config proxy.conf.json

或者为了方便使用你可以把它放在startPackage.json里

“开始”：“ng serve --proxy-config proxy.conf.json”

和运行你的服务器 npm start

Angular Sanctum 基于会话的跨域 CSRF Cookie

Angular Sanctum Session-base Cross Domain CSRF Cookie

csrf

laravel

fortify

angular

laravel-sanctum

Angular Sanctum 基于会话的跨域 CSRF Coo​​kie

Angular Sanctum Session-base Cross Domain CSRF Cookie

csrf

laravel

fortify

angular

laravel-sanctum

Angular Sanctum 基于会话的跨域 CSRF Cookie