如何解决CORS阻止maplibre-gl搜索访问AWS Location Places索引的问题

你的问题核心是：前端直接请求AWS Location Service的Places API，后端的CORS配置完全不生效——因为请求根本没经过你的后端，必须在AWS端给对应的Place索引配置CORS规则。

具体操作步骤 #

• 登录AWS控制台，找到「Location Service」服务
• 定位到你配置里的my_index_name对应的Place索引
• 进入索引详情页，找到「跨源资源共享(CORS)」选项卡
• 添加CORS规则：
  • 允许的源：开发环境填http://localhost:3000，生产环境填你的正式域名（多个源用逗号分隔，*可临时测试但生产不建议）
  • 允许的方法：勾选GET（地理编码搜索用的是GET请求）
  • 允许的头部：可以填*，或根据实际需求指定（比如Content-Type）
  • 保存配置后等待5-10分钟，AWS的CORS配置需要时间生效

额外检查项 #

1. 确认Amplify配置的region和Place索引所在区域完全一致（你这里是us-west-2，要确保索引确实在该区域）
2. 检查IAM权限：Amplify使用的身份池角色必须包含以下权限：

   {
     "Effect": "Allow",
     "Action": [
       "geo:SearchPlaceIndexForSuggestions",
       "geo:SearchPlaceIndexForText"
     ],
     "Resource": "arn:aws:geo:us-west-2:你的AWS账号ID:place-index/my_index_name"
   }
   

3. 不要尝试设置请求的mode: 'no-cors'，这会让浏览器返回不透明响应，你根本无法读取搜索结果，完全失去搜索功能

你的前端代码（createAmplifyGeocoder或手动实例化MaplibreGeocoder）写法是正确的，问题出在AWS端的CORS配置，和你的后端无关。

内容的提问来源于stack exchange，提问作者Byron Ojua-Nice