Vue、Laravel 项目初始化命令对比 / curl 命令/ CORS 机制总结与案例-EW帮帮网

前言

一个疑问衍生出另一个疑问再衍生出又一个疑问，于是有了这篇文章。

一、Vue 项目初始化命令

基于 Vite 创建 Vue 项目
- 命令：npm create vite@latest my-project -- --template vue
- 适用场景：需轻量级、高速开发环境
- 关键点：使用 Vite 作为构建工具，--template vue 指定 Vue 模板
基于 Vue CLI 创建项目
- 命令：npm create vue@latest
- 适用场景：企业级应用，需成熟工具链
- 关键点：交互式选择功能（如 Router、Pinia 等），使用 Webpack 构建
Vite 初始化项目（项目名不同）
- 命令：npm init vite@latest frontend -- --template vue
- 功能：与第一个命令功能一致，仅项目名改为 frontend
Laravel 项目混合编译依赖安装
- 命令：npm install laravel-mix vue@latest @vitejs/plugin-vue --save-dev
- 适用场景：Laravel 项目混合使用新旧编译工具
- 关键点：安装 laravel-mix（传统编译）和 @vitejs/plugin-vue（Vite 插件）

二、Laravel 项目初始化命令

手动创建 Laravel 项目并使用 Sail 启动 Docker 容器
- 命令：
```
composer create-project --prefer-dist laravel/laravel my-laravel-project
cd my-laravel-project
./vendor/bin/sail up -d
```
- 适用场景：需要完全控制项目结构和配置的场景
使用 Laravel 在线构建服务创建项目并启动 Docker 容器
- 命令：
```
curl -s "https://laravel.build/my-project?with=mysql,redis" | bash
cd my-project && ./vendor/bin/sail up -d
```
- 适用场景：需要快速启动并包含特定服务的场景，如 MySQL 和 Redis

三、curl 命令详解

作用
- curl 是一个命令行工具，用于在命令行界面下执行数据传输。支持多种协议，包括 HTTP、HTTPS、FTP 等。
常用选项
- -s 或 --silent：静默模式，不显示进度条或下载速度等信息，常用于脚本中避免输出不必要的信息。
使用场景
- 通过 curl 从指定 URL 下载数据并执行。例如，Laravel 在线构建服务通过 curl 下载并执行 shell 脚本，自动化创建 Laravel 项目并配置依赖。
结合 Bash 使用
- | 是管道符号，用于将前一个命令的输出作为后一个命令的输入。curl 下载的数据（通常是 shell 脚本）传递给 bash 执行。
Laravel 在线构建服务示例
- 命令：curl -s "https://laravel.build/myapp?with=mysql,redis" | bash
- 功能：静默下载并执行 Laravel 在线构建服务的 shell 脚本，自动化创建包含 MySQL 和 Redis 服务的 Laravel 项目。

四、CORS 策略解析与实际案例

1. CORS 核心机制：预检请求与响应头

通俗解释：
当网页发起跨域请求（如 AJAX 请求其他域名的 API，如 example.com 访问 api.com），
浏览器会先派“侦察兵”（OPTIONS 预检请求）问服务器：“我允许访问吗？”
服务器返回响应头明确规则，浏览器才放行实际请求。
CORS 则是网站主动告诉浏览器“允许谁访问我”，避免安全隐患。

解决方案（二选一）
- 中间件手动配置：创建 Cors 中间件添加头部，适用于简单场景。
- 专用扩展包：使用 fruitcake/laravel-cors 自动处理预检请求和动态配置。

关键响应头

头字段	作用示例	Laravel 配置方式
`Access-Control-Allow-Origin`	`*` 或 `https://your-domain.com`	中间件设置
`Access-Control-Allow-Methods`	`GET,POST,PUT,DELETE`	配置 `config/cors.php`
`Access-Control-Allow-Headers`	`Authorization, Content-Type`	插件自动处理（如 `fruitcake/laravel-cors`）

实际案例（PHP 处理预检请求）：

// 检测到 OPTIONS 请求（浏览器派出的“侦察兵”）
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    header('Access-Control-Allow-Origin: https://client.com'); // 只允许 client.com 访问
    header('Access-Control-Allow-Methods: GET, POST, DELETE'); // 允许的 HTTP 方法
    header('Access-Control-Allow-Headers: Content-Type, Authorization'); // 允许的请求头
    header('Access-Control-Max-Age: 86400'); // 缓存规则24小时，减少重复预检
    exit; // 结束脚本，无需处理实际数据
}

作用：此代码拦截预检请求，明确告诉浏览器后续请求的权限。否则，跨域请求会被浏览器直接阻止。

2. 域名白名单：精准控制访问权限

通俗解释：
CORS 支持域名白名单，就像“VIP 名单”：服务器只响应名单内域名的请求，其他一律拒绝，防止恶意网站盗取数据。

实际案例（Nginx 动态白名单配置）：

# 只允许 x1.domain.com 和 x2.domain.com 访问
set $cors_origin "";
if ($http_origin ~* "^https://(x1.domain.com|x2.domain.com)$") {
    set $cors_origin $http_origin;
}
add_header Access-Control-Allow-Origin $cors_origin;
add_header Access-Control-Allow-Methods "GET, POST";
add_header Access-Control-Allow-Headers "Content-Type";

作用：正则匹配请求来源，非白名单域名返回 403 错误，保障接口安全。

3. 带 Cookie 的跨域请求：特殊处理

通俗解释：
若跨域请求需携带 Cookie（如用户登录状态），服务器必须明确指定域名（不能用 * 通配符），同时前端设置 withCredentials: true。

实际案例（Laravel 中间件配置）：

// 创建中间件 app/Http/Middleware/CorsMiddleware.php
public function handle($request, Closure $next) {
    $response = $next($request);
    $response->header('Access-Control-Allow-Origin', 'http://localhost:3000') // 指定前端域名
             ->header('Access-Control-Allow-Credentials', 'true'); // 允许携带 Cookie
    return $response;
}

注册中间件（在 app/Http/Kernel.php 添加）：

protected $middleware = [
    \App\Http\Middleware\CorsMiddleware::class,
];

作用：让 localhost:3000 的前端安全调用 Laravel API 并传递用户凭证。

五、CORS 问题延申

GET, POST, DELETE我似乎在PHP代码的表单里见过，印象中每个代表一个方法？这里和表单里有什么不一样？

GET、POST、DELETE 是 HTTP 协议定义的请求方法，它们在 PHP 表单和 HTTP 请求中的角色既有联系又有区别。

1. 表单中的方法 vs HTTP 方法

表单中的 method 属性
在 HTML 表单中，method 属性通常只支持 GET 或 POST，用于指定数据提交方式：
- GET：数据通过 URL 参数传递（如 ?key=value），适合非敏感数据（如搜索）。
- POST：数据隐藏在请求体中，适合敏感信息（如密码）或大数据量提交。
  表单默认不支持 DELETE，需通过 JavaScript 或隐藏字段模拟。
HTTP 方法的完整语义
HTTP 协议定义了更多方法，如 DELETE、PUT 等，用于 RESTful API 设计：
- DELETE：删除服务器资源（如删除用户数据）。
- PUT：更新资源（如修改用户信息）。
  这些方法需通过 AJAX 或 API 调用实现，传统表单无法直接使用。

2. 核心区别与适用场景

数据传递方式
- GET：参数暴露在 URL 中，长度受限（约 2KB），可被缓存/收藏。
- POST：数据在请求体，无长度限制，更安全但不可缓存。
- DELETE：通常通过 URL 标识资源（如 /users/123），无请求体。
幂等性与安全性
- GET 和 DELETE 是幂等的（多次执行结果相同），POST 不是（如重复提交订单）。
- POST 和 DELETE 可能修改服务器数据，GET 仅用于查询。
PHP 中的处理差异
- GET 数据通过 $_GET 获取，POST 通过 $_POST，DELETE 需解析原始输入（如 file_get_contents('php://input')）。

3. 实际案例对比

表单提交（传统方式）

<!-- GET 表单 -->
<form method="get" action="search.php">
  <input type="text" name="keyword">
  <button>搜索</button>
</form>

<!-- POST 表单 -->
<form method="post" action="login.php">
  <input type="password" name="pwd">
  <button>登录</button>
</form>

GET 适合搜索，POST 适合登录。

RESTful API 调用（现代应用）

// 使用 cURL 发送 DELETE 请求
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, "https://api.example.com/users/123");
curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "DELETE");
curl_exec($ch);

需通过编程方式实现非表单方法。

4. 总结

表单：仅支持 GET/POST，用于页面数据提交。
HTTP 方法：包含 DELETE/PUT 等，用于完整资源操作（需结合 API 使用）。
选择依据：根据操作类型（查询/修改/删除）和数据敏感性决定方法。

七、Laravel Mix 与 Vite 编译对比

Laravel Mix（传统编译）
- 原理：基于 Webpack 的封装层，提供简化配置的 API。
- 编译流程：资源文件 → Webpack 编译 → 合并/压缩/版本哈希 → public 目录生成编译文件。
- 特点：配置简单但构建速度较慢，适合传统 Laravel 项目。
Vite 编译
- 原理：利用浏览器原生 ES 模块，开发阶段免打包。
- 编译流程：浏览器请求 → Vite 服务器按需编译 → 实时返回单文件。
- 优势：热更新快（毫秒级），生产构建用 Rollup 优化。

八、Laravel 实操建议

Laravel 项目优化：移除混合编译，统一使用 Vite。

npm remove laravel-mix
npm install vite laravel-vite-plugin --save-dev

Laravel 集成 Vite：使用官方插件并配置脚本，实现自动资源版本化和深度整合 Laravel 路由与视图系统。

九、Laravel Sail 是否需要安装？

1. 概述

Laravel Sail 不需要单独安装，但它依赖于 Docker 和 Docker Compose。在使用 Laravel Sail 之前，你需要确保你的系统上已经安装了 Docker 和 Docker Compose。一旦这些依赖项安装完毕，你就可以通过 Laravel 项目中的预配置脚本或手动添加的方式使用 Laravel Sail了。

2. 详细说明

依赖项安装：
- Docker：一个开源平台，用于自动化应用程序的部署为轻量级、可移植的容器。
- Docker Compose：用于定义和运行多容器 Docker 应用程序的工具。
  在安装 Laravel Sail 之前，请确保你的系统上已经安装了这两个工具。
Laravel Sail 的使用：
- Laravel Sail 是 Laravel 官方提供的一个用于管理 Docker 容器的轻量级工具。
- 它通过项目根目录下的 docker-compose.yml 文件来定义应用程序所需的服务（如 PHP、MySQL、Redis 等）。
- 使用 Laravel Sail，你可以轻松地启动、停止和管理这些容器。
Laravel 项目中的 Laravel Sail：
- 当你通过 Laravel 的在线构建服务或使用 Composer 创建一个新的 Laravel 项目时，如果你选择了包含 Laravel Sail 的选项，项目中将自动包含所需的 docker-compose.yml 文件和 sail 命令。
- 在这种情况下，你不需要进行额外的安装步骤即可使用 Laravel Sail。
手动添加 Laravel Sail：
- 如果你的 Laravel 项目中没有包含 Laravel Sail，你也可以手动添加它。这通常涉及将 laravel/sail 包作为开发依赖项添加到项目的 composer.json 文件中，并创建或更新 docker-compose.yml 文件以定义所需的服务。

Vue、Laravel 项目初始化命令对比 / curl 命令/ CORS 机制总结与案例

前言