如何在 AWS S3 静态网站中实现表单提交与后端数据库交互-html教程-PHP中文网

如何在 AWS S3 静态网站中实现表单提交与后端数据库交互

本文详解为何部署在 aws s3 的前端表单无法通过 post 请求调用后端 api，并提供完整解决方案：改用 api gateway + lambda 架构、修正请求方式（get 替代 post）、修复 cors 与路由不匹配问题，确保 quiz 提交后能正确查询 postgresql 并返回图书推荐结果。

本文详解为何部署在 aws s3 的前端表单无法通过 post 请求调用后端 api，并提供完整解决方案：改用 api gateway + lambda 架构、修正请求方式（get 替代 post）、修复 cors 与路由不匹配问题，确保 quiz 提交后能正确查询 postgresql 并返回图书推荐结果。

在将 Web 应用部署至 AWS S3 时，一个常见误区是误以为 S3 能直接托管并执行 Node.js 后端逻辑（如 server.js）。S3 仅提供静态文件托管服务（HTML/CSS/JS），不支持运行服务器代码或处理 POST 请求——这正是你遇到 "Method Not Allowed" 错误的根本原因：浏览器向 S3 bucket 发送了 POST 请求，而 S3 默认只允许 GET、HEAD 等安全方法，拒绝所有 POST。

你的当前架构存在两个关键断点：

前端 quiz.js 中 fetch() 指向的是 API Gateway 的 URL（https://mhtwcqy8pd.execute-api.../BookWizard），但后端 server.js 实际监听的是本地 http://localhost:3000/recommendation，且未部署到任何可公网访问的服务上；
即使后端已部署，S3 页面发起的跨域请求若未被 API Gateway 或后端正确配置 CORS，也会被浏览器拦截。

✅ 正确做法：使用 API Gateway + Lambda + RDS/PostgreSQL 构建无服务器后端，并让前端调用该 API。

✅ 第一步：修正前端请求方式（推荐 GET，规避 S3 限制）

由于你已在使用 API Gateway（URL 含 execute-api），应确保其集成的后端（如 Lambda）支持所用 HTTP 方法。若暂未配置 POST 集成，最快速验证方案是改为 GET 请求：

// 替换 quiz.js 中的 fetch 调用
fetch(`https://mhtwcqy8pd.execute-api.us-east-2.amazonaws.com/BookWizard?genreId=${genreId}`, {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(response => {
  if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
  return response.json();
})
.then(data => {
  const resultContainer = document.getElementById('result-container');
  if (data.title) {
    resultContainer.innerHTML = `
      <h2>Based on your answers, we recommend:</h2>
      <p><strong>${data.title}</strong> by ${data.author}</p>
      <p>${data.description || ''}</p><div class="aritcle_card flexRow artxards">
											<div class="artcardd flexRow">
												<a class="aritcle_card_img" rel="nofollow" href="/xiazai/js/7981" title="jQuery金融借款单提交表单"><img
														src="https://img.php.cn/upload/jscode/000/000/002/170900640226447.jpg" alt="jQuery金融借款单提交表单" onerror="this.onerror='';this.src='/static/lhimages/moren/morentu.png'" ></a>
												<div class="aritcle_card_info flexColumn">
													<a rel="nofollow" href="/xiazai/js/7981" title="jQuery金融借款单提交表单" class="overflowclass">jQuery金融借款单提交表单</a>
													<p class="overflowclass">jQuery金融借款单提交表单，包含出借金额和日期的选择，且自动计算利息，非常的简单方便。</p>
												</div>
												<a rel="nofollow" href="/xiazai/js/7981" title="jQuery金融借款单提交表单" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span>
												</a>
											</div>
										</div>
      ${data.imgurl ? `@@##@@` : ''}
    `;
  } else {
    resultContainer.innerHTML = data.message || "No recommendation found.";
  }
})
.catch(error => {
  console.error('Fetch failed:', error);
  document.getElementById('result-container').innerHTML = "Failed to load recommendation.";
});

⚠️ 注意：Content-Type 在 GET 请求中通常无需设置；若 API Gateway 启用了请求验证，可移除该 header。

✅ 第二步：确保 API Gateway 路由与后端一致

检查你的 API Gateway 是否已创建 /BookWizard 资源，并为其配置了 GET 方法（而非仅 POST），且该方法已正确集成到后端服务（如 Lambda 函数）。若后端实际路径为 /recommendation，则 API Gateway 的路径也需同步为 /recommendation，或在集成层做路径映射。

✅ 第三步：后端（Lambda）示例（Node.js + pg）

若使用 Lambda，index.js 可简化为：

const { Client } = require('pg');

const client = new Client({
  user: process.env.DB_USER,
  host: process.env.DB_HOST,
  database: process.env.DB_NAME,
  password: process.env.DB_PASSWORD,
  port: 5432,
  ssl: { rejectUnauthorized: false }
});

exports.handler = async (event) => {
  await client.connect();
  try {
    const genreId = parseInt(event.queryStringParameters?.genreId);
    if (!genreId) {
      return { statusCode: 400, body: JSON.stringify({ message: 'Missing genreId' }) };
    }

    const query = 'SELECT title, author, description, imgurl FROM books WHERE genreid = $1 ORDER BY RANDOM() LIMIT 1';
    const { rows } = await client.query(query, [genreId]);

    return {
      statusCode: 200,
      headers: { 'Access-Control-Allow-Origin': '*' }, // 生产环境请指定域名
      body: JSON.stringify(rows[0] || { message: 'No book found for this genre' })
    };
  } catch (err) {
    console.error(err);
    return { statusCode: 500, body: JSON.stringify({ message: 'Server error' }) };
  } finally {
    await client.end();
  }
};