如何安全搭建前后端分离应用？Nuxt与DRF适配方案咨询

针对你担心的API凭据泄露、API不能公开访问的问题，以下是几个落地性强的方案，结合你的Vue和Django经验应该能快速上手：

1. 会话式身份验证（Session Auth） #

这是最贴近Django原生生态的方案，DRF默认支持SessionAuthentication，配合Nuxt的SSR特性可以实现安全的会话共享：

• DRF端配置：在settings.py里启用会话认证，确保CSRF保护开启：

  REST_FRAMEWORK = {
      'DEFAULT_AUTHENTICATION_CLASSES': [
          'rest_framework.authentication.SessionAuthentication',
      ],
      'DEFAULT_PERMISSION_CLASSES': [
          'rest_framework.permissions.IsAuthenticated',
      ]
  }
  

• Nuxt端处理：
  • 配置代理，把API请求转发到DRF，避免跨域同时隐藏真实API地址：在nuxt.config.js里添加：

    export default {
      proxy: {
        '/api/': {
          target: 'http://your-drf-server.com/',
          pathRewrite: { '^/api/': '' },
          credentials: true // 允许携带会话Cookie
        }
      }
    }
    

  • 登录逻辑：前端提交用户名密码到DRF的自定义登录视图或Django自带登录接口，DRF返回带HttpOnly、Secure标记的会话Cookie，后续所有API请求会自动携带该Cookie，后端验证用户身份，无需在前端存储任何密钥。

2. JWT身份验证（HttpOnly Cookie存储） #

如果需要无状态的身份验证，JWT是不错的选择，但绝对不要把JWT存在localStorage，改用HttpOnly Cookie存储：

• DRF端：使用djangorestframework-simplejwt库，配置JWT通过Cookie返回：

  # settings.py
  from datetime import timedelta
  SIMPLE_JWT = {
      'ACCESS_TOKEN_LIFETIME': timedelta(minutes=15),
      'REFRESH_TOKEN_LIFETIME': timedelta(days=1),
      'AUTH_COOKIE': 'access_token',
      'AUTH_COOKIE_SECURE': True, # 生产环境启用
      'AUTH_COOKIE_HTTPONLY': True,
      'AUTH_COOKIE_SAMESITE': 'Lax',
  }
  

  编写登录视图，验证用户后返回包含JWT的HttpOnly Cookie。
• Nuxt端：请求API时确保withCredentials: true，比如用useFetch或$axios时配置该参数，后端自动验证Cookie中的JWT即可。

3. Nuxt反向代理隐藏API密钥 #

如果你的API需要基于密钥验证（而非用户身份），可以用Nuxt的serverMiddleware做反向代理，把密钥存在Nuxt服务器端的环境变量中：

• 安装http-proxy-middleware，在Nuxt项目中创建server/middleware/proxy.js：

  const { createProxyMiddleware } = require('http-proxy-middleware')
  
  export default function (req, res) {
    const proxy = createProxyMiddleware({
      target: 'http://your-drf-server.com/',
      changeOrigin: true,
      onProxyReq: (proxyReq) => {
        // 给DRF请求添加API密钥头
        proxyReq.setHeader('X-API-Key', process.env.DRF_API_KEY)
      }
    })
    proxy(req, res)
  }
  

• 在nuxt.config.js中注册中间件：

  export default {
    serverMiddleware: [
      { path: '/api', handler: '~/server/middleware/proxy.js' }
    ]
  }
  

• 前端直接请求/api/xxx，Nuxt服务器会转发请求到DRF并带上密钥，前端完全接触不到密钥，API也不用对所有人开放。

4. OAuth2授权码流程 #

如果需要支持第三方登录或更严谨的身份验证流程，可以用DRF的django-oauth-toolkit实现OAuth2，Nuxt作为客户端走授权码流程：

• DRF端配置OAuth2服务器，创建客户端应用（授权类型选Authorization Code）。
• Nuxt端：在SSR阶段处理授权跳转和令牌交换，把获取到的令牌存在HttpOnly Cookie中，后续API请求携带该令牌。这个流程中，客户端密钥只在Nuxt服务器端使用，前端不会暴露。

以上方案可以根据你的业务场景选择，比如用户登录场景优先选会话或JWT，纯API密钥验证场景选反向代理，多客户端场景选OAuth2。

内容的提问来源于stack exchange，提问作者Matheus Tenório