AWS Elastic Beanstalk配置HTTPS遇健康问题及跨域API配置咨询

核心排查点与解决方案 #

1. SSL证书与区域匹配
   确保使用的AWS ACM证书与Elastic Beanstalk环境处于同一区域（us-east-1证书可跨区域用于CloudFront，但Elastic Beanstalk需同区域证书），且证书已完成域名验证并绑定到目标子域名。

2. 单实例环境HTTPS配置
   在项目根目录创建.ebextensions/https.config配置文件，替换占位符后重新部署：

   Resources:
     sslSecurityGroupIngress:
       Type: AWS::EC2::SecurityGroupIngress
       Properties:
         GroupId: {"Fn::GetAtt" : ["AWSEBSecurityGroup", "GroupId"]}
         IpProtocol: tcp
         ToPort: 443
         FromPort: 443
         CidrIp: 0.0.0.0/0
   files:
     /etc/httpd/conf.d/ssl.conf:
       mode: "000644"
       owner: root
       group: root
       content: |
         LoadModule ssl_module modules/mod_ssl.so
         Listen 443
         <VirtualHost *:443>
           <Proxy *>
             Require all granted
           </Proxy>
           SSLEngine on
           SSLCertificateFile "/etc/pki/tls/certs/server.crt"
           SSLCertificateKeyFile "/etc/pki/tls/certs/server.key"
           SSLCertificateChainFile "/etc/pki/tls/certs/chain.crt"
           ProxyPass / http://127.0.0.1:8000/ retry=0
           ProxyPassReverse / http://127.0.0.1:8000/
           ProxyPreserveHost on
           ErrorLog /var/log/httpd/elasticbeanstalk-error_log
         </VirtualHost>
   container_commands:
     01_get_cert:
       command: |
         aws acm get-certificate --certificate-arn YOUR_CERTIFICATE_ARN --region YOUR_REGION --output text --query Certificate > /etc/pki/tls/certs/server.crt
         aws acm get-certificate --certificate-arn YOUR_CERTIFICATE_ARN --region YOUR_REGION --output text --query CertificateChain > /etc/pki/tls/certs/chain.crt
         aws acm export-certificate --certificate-arn YOUR_CERTIFICATE_ARN --region YOUR_REGION --passphrase fileb:///dev/null --output text --query PrivateKey > /etc/pki/tls/certs/server.key
       leader_only: true
   

   • 给Elastic Beanstalk实例角色添加AmazonACMFullAccess权限，确保实例能拉取证书文件。
   • 若使用Nginx而非Apache，需修改配置文件路径和内容为Nginx格式。

3. 健康检查配置修正

   • Elastic Beanstalk默认健康检查路径为/，若Django根路径未返回200状态码，需在控制台修改健康检查路径为存在的端点（如/health，需在Django中实现该端点返回200）。
   • 确保健康检查使用HTTPS协议，或针对健康检查路径禁用HTTP到HTTPS的重定向，避免3xx重定向被判定为异常。

4. 安全组验证
   手动确认Elastic Beanstalk实例的安全组已允许443端口的入站流量（上述配置文件已自动添加，但需检查是否生效）。

1. 安装依赖：

   pip install django-cors-headers
   

2. 修改settings.py：

   INSTALLED_APPS = [
       # 其他应用
       'corsheaders',
   ]
   
   MIDDLEWARE = [
       # 必须置于CommonMiddleware之前
       'corsheaders.middleware.CorsMiddleware',
       'django.middleware.common.CommonMiddleware',
       # 其他中间件
   ]
   
   # 允许的前端CloudFront子域名
   CORS_ALLOWED_ORIGINS = [
       "https://your-frontend-subdomain.example.com",
   ]
   
   # 允许的HTTP方法
   CORS_ALLOW_METHODS = [
       "DELETE", "GET", "OPTIONS", "PATCH", "POST", "PUT"
   ]
   
   # 允许的请求头部
   CORS_ALLOW_HEADERS = [
       "accept", "accept-encoding", "authorization", "content-type",
       "origin", "user-agent", "x-csrftoken", "x-requested-with"
   ]
   
   # 若需跨域传递Cookie（如会话认证），启用以下配置
   # CORS_ALLOW_CREDENTIALS = True
   # SESSION_COOKIE_SECURE = True
   # CSRF_COOKIE_SECURE = True
   
   # 更新ALLOWED_HOSTS包含后端HTTPS子域名和Elastic Beanstalk默认域名
   ALLOWED_HOSTS = [
       "your-backend-subdomain.example.com",
       "your-env-name.elasticbeanstalk.com"
   ]
   

在Vue项目中创建或修改API配置文件（如src/api/index.js）：

import axios from 'axios'

// 配置后端HTTPS API地址
axios.defaults.baseURL = 'https://your-backend-subdomain.example.com/api'

// 若需跨域传递Cookie，启用以下配置（需与Django的CORS_ALLOW_CREDENTIALS对应）
// axios.defaults.withCredentials = true

// 请求拦截器：添加认证Token等通用头部
axios.interceptors.request.use(
  config => {
    const token = localStorage.getItem('auth_token')
    if (token) {
      config.headers.Authorization = `Bearer ${token}`
    }
    return config
  },
  error => Promise.reject(error)
)

// 响应拦截器：统一处理错误状态
axios.interceptors.response.use(
  response => response,
  error => {
    if (error.response?.status === 401) {
      // 示例：跳转到登录页
      window.location.href = '/login'
    }
    return Promise.reject(error)
  }
)

export default axios

组件中调用示例：

import axios from '@/api'

export default {
  async mounted() {
    try {
      const res = await axios.get('/items')
      this.items = res.data
    } catch (err) {
      console.error('获取数据失败:', err)
    }
  }
}

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