Laravel 10与Vue.js 3前后端API安全互联方案咨询

一、隐藏API服务器地址的实现 #

• 前端代理转发：Vue3开发环境用Vite/Vue CLI配置代理，将/api前缀的请求转发到真实后端API。生产环境用Nginx做反向代理，让前端域名下的/api路径映射到后端服务器，用户只会看到前端域名的请求，不会暴露后端地址。
  Vite配置示例（vite.config.js）：

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'https://your-laravel-api-domain.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
})

• 环境变量注入地址：绝对不要在前端代码硬编码后端地址，用环境变量配置API前缀。比如Vite的.env文件中设置VITE_API_BASE=/api，前端通过import.meta.env.VITE_API_BASE调用，编译后不会暴露真实后端地址。

二、防止非法API调用的核心措施 #

• API身份认证：用Laravel Sanctum或Passport实现Token认证。前端登录后获取合法Token，后续所有请求在请求头携带Authorization: Bearer {token}，Laravel会自动校验Token有效性，非法请求直接拦截。
• 请求签名校验：实现请求签名机制防止重放和篡改。前端根据请求参数、时间戳、密钥生成签名，后端用相同规则生成签名比对，不一致则拒绝请求：
  前端生成签名（伪代码）：

const timestamp = Date.now();
const requestParams = { userId: 123 };
const secretKey = import.meta.env.VITE_API_SECRET; // 从环境变量注入，不要硬编码
const signature = md5(`${timestamp}&${JSON.stringify(requestParams)}&${secretKey}`);

// 请求时携带时间戳和签名
axios.post('/api/data', requestParams, {
  headers: {
    'X-Timestamp': timestamp,
    'X-Signature': signature
  }
});

Laravel中间件校验示例：

<?php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Request;

class ValidateRequestSignature
{
    public function handle(Request $request, Closure $next)
    {
        $timestamp = $request->header('X-Timestamp');
        $signature = $request->header('X-Signature');
        $params = $request->except(['_token']);

        // 校验请求有效期（5分钟），防止重放攻击
        if (abs(time() - ($timestamp / 1000)) > 300) {
            return response()->json(['message' => '请求超时'], 403);
        }

        $generatedSignature = md5($timestamp . '&' . json_encode($params) . '&' . env('API_SECRET'));
        if (!hash_equals($generatedSignature, $signature)) {
            return response()->json(['message' => '非法请求'], 403);
        }

        return $next($request);
    }
}

注意：后端密钥存在环境变量API_SECRET中，前端密钥通过环境变量注入，不要直接写在代码里。

三、指定客户端校验（拦截非法应用） #

• 客户端ID+签名校验：给每个合法客户端（官方Vue前端、Telegram机器人）分配唯一的客户端ID和对应密钥。请求时携带X-Client-ID和X-Client-Signature，后端校验客户端ID是否在白名单，再用对应密钥验证签名。
• Telegram专属校验：如果服务Telegram机器人，使用Telegram官方的Webhook校验机制。设置Webhook时指定一个secret_token，Telegram会在请求头携带X-Telegram-Bot-Api-Secret-Token，后端只需校验这个Token是否与预设值一致，即可确保请求来自Telegram官方。
• IP白名单（可选）：如果API仅服务特定IP（比如Telegram服务器IP），可以在Nginx或Laravel中间件中配置IP白名单，直接拦截非白名单IP的请求。

内容的提问来源于stack exchange，提问作者Hoseain Sanadgol