AWS S3托管HTML/CSS静态网页短横线显示为乱码问题咨询

这个是典型的字符编码声明/传输不匹配问题：你页面里的减号是UTF-8编码的，但浏览器用了ISO-8859-1（Latin-1）编码解析页面内容，才会把单字符的UTF-8减号解析成三个乱码字符−。本地运行正常是因为本地服务器默认会带正确的UTF-8编码响应头，S3默认配置没有带。

• 第一步：检查HTML源码的head部分是否有显式编码声明
  确认head标签内有没有这行代码：

  <meta charset="UTF-8">
  

  如果没有，加上之后重新上传到S3测试。
• 第二步：检查S3返回的响应头是否带正确编码
  打开浏览器开发者工具的「网络」面板，刷新页面，找到对应HTML文件的请求，查看响应头里的Content-Type字段：

  正常的配置应该是 Content-Type: text/html; charset=utf-8
  如果返回的Content-Type没有带charset=utf-8后缀，就会触发这个问题。

单个文件修复 #

在S3控制台找到对应的HTML文件，点击「属性」-> 「元数据」，找到Content-Type键，将值修改为text/html; charset=utf-8，保存后刷新CDN缓存（如果配了CloudFront的话）测试即可。

批量上传自动配置 #

如果是用CLI/SDK批量上传文件，上传时指定元数据即可，以AWS CLI为例：

aws s3 sync ./本地静态文件目录 s3://你的桶名 --content-type "text/html; charset=utf-8" --exclude "*" --include "*.html"

其他静态资源比如CSS、JS文件也可以按照同样逻辑配置对应类型的charset后缀，避免同类问题。

如果配置后还有问题，可以强制给浏览器指定编码测试：Chrome浏览器右键页面 -> 「编码」 -> 选择「UTF-8」，如果此时显示正常，就可以100%确认是编码配置的问题，按照上面的步骤调整即可。

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