S3前端连接Elastic Beanstalk后端出现403权限拒绝问题求助

问题 #

将存储在S3桶中的React前端应用连接到部署在Elastic Beanstalk上的Node.js后端（用于生成JWT实现Tableau单点登录SSO），本地运行正常，但线上请求时服务器返回403访问拒绝错误。CloudFront返回错误提示：该分发未配置为允许所使用的HTTP请求方法，仅支持可缓存请求。已排除后端代码逻辑问题，需AWS配置层面的解决方向。

相关代码 #

server.js

const cors = require('cors');
const express = require('express');
const generateJwtToken = require('./genJWT');

const app = express();
app.use(cors(
  {origin: "https://something.something.something-labs.com/", 
    methods:['POST', 'HEAD', 'PUT', 'GET', 'DELETE',"FETCH"],
    credentials: true  
  }));

app.use(express.json()); // Handle JSON request bodies

app.post('/', function (req, res) {
  try {
    // const username = req.body.tableauUname; // Assuming the JSON structure is { "tableauUname": "username" }
    // const token = generateJwtToken(username);
    
    res.status(200).json({message: "Hello from deployed server"});
    // res.status(200).json({ token });
  } catch (error) {
    console.error("Error parsing request body: ", error);
    res.status(400).json({ error: "Bad Request" });
  }
});

app.all('/', function (req, res) {
  res.status(405).send('Method Not Allowed');
});

app.use((err, req, res, next) => {
  res.setHeader("Access-Control-Allow-Origin", "*"); // Set CORS header for all responses
  console.error("Global Error Handler: ", err);
  res.status(500).json({ error: "Internal Server Error" });
});

app.listen(process.env.PORT || 80, function (error) {
  if (error) {
    console.log("Something went wrong", error);
  } else {
    console.log("Server is listening on port " + port);
  }
});

Axios请求代码

const getJWT = (Username) => {
  return new Promise((resolve, reject) => {
    const userInfo = {
      Uname: Username,
    };
    axios
      .post("1231231-123123.131231232-123123.131232-123123-123123.elasticbeanstalk.com ", userInfo)
      .then((response) => {
        const token = response.data.token;
        resolve(token); // Resolve the promise with the token
      })
      .catch((error) => {
        console.log(error);
        reject(error);
         // Reject the promise with the error
      });
  });
};

解决方向 #

• 调整CloudFront缓存行为配置：
  1. 进入CloudFront控制台，找到对应分发的「行为」标签页
  2. 编辑关联后端的缓存行为，在「允许的HTTP方法」中勾选POST及其他需要的非缓存方法（不要仅选默认的「GET, HEAD, OPTIONS」）
  3. 将「缓存策略」设置为「CachingDisabled」，因为POST属于不可缓存请求，默认策略会拦截这类请求
• 修正Axios请求URL：
  请求URL缺少https://前缀，应改为https://1231231-123123.131231232-123123.131232-123123-123123.elasticbeanstalk.com，否则浏览器会将其解析为前端域名下的相对路径，导致请求错误发送到CloudFront
• 检查CloudFront源配置：
  确认Elastic Beanstalk域名被正确配置为CloudFront源，且「Origin Protocol Policy」设置为「HTTPS Only」或「Match Viewer」，避免协议不匹配引发错误
• 验证Elastic Beanstalk安全组：
  确保安全组允许CloudFront边缘节点的入站请求，或直接开放443端口的HTTPS入站流量（针对自定义源场景）
• 修正后端CORS配置：
  将origin末尾的斜杠去掉，改为"https://something.something.something-labs.com"；同时在methods中添加OPTIONS，适配浏览器预检请求需求

内容的提问来源于stack exchange，提问作者Noam TheLoreFnatic Hadad