从Amplify服务向EC2实例发送GET请求出现跨协议访问阻塞问题

问题原因 #

你遇到的报错是浏览器标准的混合内容安全拦截策略：所有运行在HTTPS协议下的站点，默认禁止发起HTTP协议的异步请求，避免敏感数据明文传输泄露，没有通用方案可以绕过这个限制，你想的给EC2后端配置HTTPS访问的思路完全正确。

实现步骤 #

• 你直接用EC2弹性IP的逻辑没问题，但正规SSL证书无法绑定到公网IP，首先需要给EC2绑定一个可用域名，将域名的A记录解析到EC2的弹性公网IP即可，你可以用自己购买的主域名或者免费二级域名。
• 给EC2实例的安全组放开80（HTTP）、443（HTTPS）端口的入站权限，允许公网访问。
• 推荐用Nginx做反向代理处理HTTPS请求，转发到本地pm2运行的Node服务，操作更简单也更稳定：
  1. 登录EC2服务器安装依赖：sudo apt update && sudo apt install nginx python3-certbot-nginx -y
  2. 编辑Nginx配置文件，添加反向代理规则（假设你的Node服务运行在本地3000端口，替换成你实际的端口和域名即可）：

     server {
         listen 80;
         server_name 你的域名;
         location / {
             proxy_pass http://127.0.0.1:3000;
             proxy_set_header Host $host;
             proxy_set_header X-Real-IP $remote_addr;
         }
     }
     

  3. 执行命令一键申请免费SSL证书并自动配置HTTPS：sudo certbot --nginx -d 你的域名，按照提示填写邮箱、同意服务条款即可，证书会自动续期无需手动维护。
• 调整前端代码的请求地址为https://你的域名/db，同时给Express后端配置CORS规则，允许你的Amplify站点跨域访问：
  安装cors依赖：npm install cors
  后端代码添加配置：

  const cors = require('cors')
  app.use(cors({
    origin: '你的Amplify站点HTTPS地址'
  }))
  

你的后端代码存在的隐藏问题 #

你当前的接口代码里res.status(200).json(itemObj)写在了forEach循环内部，请求第一次遍历就会发送响应结束请求，后续逻辑不会执行，且返回的数据结构也不符合预期，建议修改为：

app.get('/db', (req,res) => {
  let ddb = new AWS.DynamoDB({ apiVersion: "2012-08-10" });
  const params = {
    TableName: "blablabla",
  };
  ddb.scan(params, function (err, data) {
    if (err) {
      console.log("Error", err);
      return res.status(500).json({error: '查询失败'})
    } else {
      console.log("Success", data);
      // 直接返回查询到的Items即可，无需额外遍历
      res.status(200).json(data.Items);
    }
  })
})

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