HERE Maps Tile API随机出现CORS错误问题咨询

向HERE Map API发起请求时，少数请求返回200正常响应，但多数请求因CORS策略被拦截，最终返回301状态码。

浏览器控制台错误信息翻译后如下：

从源地址http://google.com向http://2.base.maps.cit.api.here.com/maptile/2.1/maptile/24c3a120e9/normal.day/10/840/607/256/png8?xxxxxxxx发起XMLHttpRequest请求时，被CORS策略拦截：请求的资源中不存在Access-Control-Allow-Origin响应头。

响应状态截图说明 #

• 200响应截图：显示请求成功完成，状态码为200，响应头包含必要的CORS允许字段，响应体为正常的地图瓦片内容
• 301响应截图：显示请求被重定向，状态码为301，响应头中缺失Access-Control-Allow-Origin字段，导致浏览器触发CORS拦截

实用解决方向 #

1. 切换为HTTPS协议请求：当前请求使用HTTP协议，HERE的正式服务一般默认重定向到HTTPS地址，而重定向后的地址可能未配置适配的CORS规则。直接将请求地址中的http://替换为https://，尝试发起请求。
2. 配置API的CORS允许源：登录HERE开发者平台，找到对应的项目，将你的前端源地址http://google.com添加到CORS允许列表中，确保API密钥绑定的域名权限正确。
3. 搭建后端代理转发请求：如果无法修改HERE的CORS配置，可在自己的后端搭建一个简单的代理服务，前端请求后端接口，由后端转发请求到HERE Map API，绕过浏览器的CORS限制。
4. 更换为生产环境域名：请求地址中的cit标识说明当前使用的是HERE的测试环境，测试环境的CORS配置可能不完善，建议改用官方生产环境的地图瓦片域名。

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