VUE 前端和 PHP 后端的问题 / Api

Question

首先为我的英语感到抱歉，因为它不是我的母语。希望它足够清楚。

我们正在开发一个用户系统，用户在登录后可以执行各种操作，例如加入活动、更改个人资料数据、在论坛中留言以便其他用户阅读和回答等。这个想法是有两个不同的“项目”，一个用于后端（几乎已经使用 PHP 作为 CRUD Api 完成），一个用于 VUE JS 的前端。

这两个项目将托管在同一台服务器上，因此一旦部署，我们就不会有任何 CORS 或相关问题。

目前后端使用 PHP 会话（如果确实需要，可以花时间更改身份验证系统）来了解用户是否已登录。使用邮递员进行测试，一切似乎都按预期工作。

我的问题是在开发过程中如何处理用户会话、了解用户已登录等。一旦项目完成并部署在同一台服务器上，使用 PHP Session 或使用 JWT / Cookies 都没有问题。但是在开发过程中，我看不出在不构建前端的情况下测试前端的方法，因为 API 要么在已经部署的服务器上，要么在本地 xampp，这两种方式都给我带来了很多麻烦，因为：

PHP 会话： 由于php会话是域独占的，所以从前端到后端的每个请求，只要它们不在同一台服务器上，都会被视为不同的会话。

JWT: JWT 可能是一个解决方案，但前提是将令牌存储在 localstorage、sessionstorage 或不是 httponly 的 cookie 上，因为如果我希望后端设置一个带有令牌的 httponly cookie，由于不同的服务器，cookie 在开发过程中将不可用，而不是让我正确地测试前端而不构建它并部署它到主机或将它复制到 xampp。关于 localstorage、sessionstorage 或普通 cookie，在阅读了很多之后，我放弃了它们，因为它们可能导致 XSS、CSRF 等安全问题

总而言之，我认为最好的办法是使用 php 会话，因为这两个项目将一起托管，但我不知道如何在无需构建和上传的情况下测试前端它或将 dist 文件夹移动到 xampp.

感谢您的宝贵时间，希望您能赐教

Answer 1

设置 php 响应 headers 以允许凭据 Talal 在评论中建议：

header("Access-Control-Allow-Origin: http://localhost:8080");
header("Access-Control-Allow-Credentials: true");

在 axios 调用中传递参数 withcredentials: true

this.axios.get(URL, {withCredentials: true })

会解决大部分 CORS 问题，服务器会在响应中发送 session cookie，但浏览器仍然会拒绝保存 cookie，因为 SameSite 未设置（Chrome默认情况下将其设置为 Lax ）。解决了这个问题：

ini_set('session.cookie_secure', "1"); 
ini_set('session.cookie_httponly', "1"); 
ini_set('session.cookie_samesite','None');

VUE 前端和 PHP 后端的问题 / Api

Problem / Question with VUE Frontend and PHP Backend / Api

javascript

php

session

jwt

vue.js