从Netlify部署的Vue应用调用AWS API时遭遇403 Forbidden错误

我的Vue前端部署在Netlify，Java Spring Boot后端以容器形式运行在EC2实例上。因为EC2公网IPv4不支持HTTPS，所以用AWS创建了HTTP API来做前端到后端的流量路由。已经在API上配置了CORS，也在Vue里设置了代理，但始终出现403错误。

当前配置 #

AWS CORS配置 #

Access-Control-Allow-Origin: https://(site-name).netlify.app
Access-Control-Allow-Headers: content-type, authorization
Access-Control-Allow-Methods: POST, OPTIONS, DELETE, GET
Access-Control-Expose-Headers: date, x-api-id
Access-Control-Max-Age: 300 Seconds
Access-Control-Allow-Credentials: YES

Vue配置 #

module.exports = {
  devServer: {
    proxy:  'https://<AWS API ID>.execute-api.us-east-1.amazonaws.com'
  }
}

前端示例fetch请求 #

const apiURL = 'https://<AWS API ID>.execute-api.us-east-1.amazonaws.com'

const response = await fetch(`${apiURL}/api/transaction?id=${transactionID}`, {
  method: 'GET',
  headers: {'Content-Type': 'application/json'}
});

排查与解决建议 #

• Vue代理仅适用于本地开发：你配置的devServer.proxy只在本地开发时生效，部署到Netlify后完全不起作用。Netlify上的前端请求是直接发往AWS API的，必须确保AWS的CORS配置完全正确，或者在Netlify通过_redirects文件配置生产环境代理规则。
• 验证Origin完全匹配：检查Netlify实际的请求Origin（比如是否带www、自定义域名是否正确），AWS里的Access-Control-Allow-Origin必须和前端实际请求的Origin完全一致，包括协议、域名、端口（如果有）。
• 检查OPTIONS预检请求：用浏览器开发者工具查看Network面板的OPTIONS请求，确认响应状态码为200，且响应头包含正确的CORS字段（如Access-Control-Allow-Origin、Access-Control-Allow-Methods）。若OPTIONS请求失败，后续实际请求会被浏览器拦截。
• 添加credentials配置（按需）：因为你开启了Access-Control-Allow-Credentials: YES，如果请求需要携带cookie或认证信息，fetch请求必须加上credentials: 'include'，否则浏览器会拒绝响应。
• 检查AWS API Gateway权限：确认API Gateway的资源策略是否允许Netlify域名访问，或者是否要求API密钥但请求未携带。
• 避免前后端CORS冲突：如果Spring Boot后端自身也配置了CORS，可能和AWS API Gateway的设置冲突，建议关闭后端CORS配置，或保持两者配置一致。
• 验证请求路径与API部署：确认AWS API Gateway的资源路径和你请求的/api/transaction完全匹配，且API已部署到正确的stage（比如prod）。

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