天地图跨域问题解决(axios配置withCredentials遇到的坑)

本文讲述了作者在使用天地图API时遇到跨域问题,通过尝试和分析发现是axios的withCredentials默认设置导致的。解决办法在于理解withCredentials的作用,调整后端Access-Control-Allow-Origin设置并与之配合。

天地图注册并在页面中直接调用API报错跨域

最近接受前同事的项目,需要加一些地理编码的功能,在天地图注册并调用API时一直报错跨域:
报错如图

中间试了jsonp请求也不行,各种方法都没解决,最后重新建了一个全新的项目发现可以请求成功。我就纳了闷了。。。。最后发现是axios全局配置了withCredentials: true
在这里插入图片描述
晕死了啊晕死了啊,简直没天理,浪费了半天的时间!!!!

withCredentials的作用

withCredentials:表示跨域请求时是否需要使用凭证。
意思就是开启withCredentials后,服务器才能拿到你的cookie。但是一旦设置true以后,后端设置Access-Control-Allow-Origin不能为 " * ", 必须是你的源地址,而且必须设置header(‘Access-Control-Allow-Credentials: true’),如果不设置的话就是不允许携带cookie过去。
另外当后端Access-Control-Allow-Origin设置为 * 时cookie不会出现在http的请求头里,所以报错里会说Access-Control-Allow-Origin不能是*。

晕死了啊晕死了啊,因为这么点错浪费半天的时间!!!

<think>好的,我现在需要帮助用户解决在Unity中调用天地图API的问题。首先,我得理解用户的需求。用户想要一个示例教程,说明如何在Unity里调用天地图的API。天地图主要提供地图服务,比如卫星影像、地形数据等,可能在Unity中用于3D地形生成或显示地图。 接下来,我需要回忆Unity中如何集成外部API。通常,这涉及到使用HTTP请求获取数据,处理返回的数据(可能是图片、JSON等),然后在Unity中渲染。天地图的API可能需要使用Web请求,比如RESTful接口,获取地图切片或者数据。 然后,考虑到用户提供的引用内容,比如引用[2]提到使用Real World Terrain插件根据卫星数据创建地形,可能用户希望将天地图的数据导入Unity生成地形。不过用户的问题更偏向于直接调用API,而不是使用现有插件。因此,示例可能需要展示如何通过代码获取天地图的数据,并在Unity中应用。 我需要确定天地图API的具体调用方式。查阅天地图API文档,通常需要申请API密钥,然后通过URL请求获取地图切片。例如,影像地图的URL可能类似于`http://t0.tianditu.gov.cn/img_w/wmts?tk=您的密钥`,参数包括服务类型、版本、图层、样式、格式等。 接下来,如何在Unity中处理这些请求?Unity可以使用UnityWebRequest类来发送HTTP请求,获取纹理数据。然后,将获取的纹理应用到地形或平面对象上。比如,创建一个平面,将下载的影像纹理作为材质的主纹理。 还需要考虑坐标系的问题天地图使用的是Web墨卡托投影(EPSG:3857),而Unity使用三维空间坐标,可能需要坐标转换。但如果是简单显示平面地图,可能不需要复杂的转换,直接将纹理贴在平面上即可。 然后,用户可能需要示例代码。代码部分应包括申请API密钥,发送请求,处理响应,应用纹理。同时,需要注意异步处理,使用协程来处理网络请求,避免阻塞主线程。 另外,需要考虑错误处理,比如网络错误、密钥无效等情况,以及如何加载和显示地图瓦片。可能需要根据相机位置动态加载不同的瓦片,但这可能比较复杂,示例可能先展示静态加载一个地图切片。 还需要引用用户提供的参考内容。比如引用[2]提到高程和影像数据与Unity地形的关系,可以建议用户如果需要更复杂的地形生成,结合高程数据,可能需要使用插件或自行处理数据。 最后,生成相关问题,帮助用户深入理解,比如如何动态加载多块瓦片、坐标系转换、优化性能等,引用相关的参考内容,如引用[4]提到的剔除技术优化渲染。 总结步骤:申请密钥、创建Unity项目、编写脚本发送请求、处理纹理、应用材质、建议和优化提示。需要确保代码正确,使用正确的API端点,处理异步操作,并注意可能的错误点。</think>在Unity中调用天地图API主要涉及通过HTTP请求获取地图数据(如影像、地形等),并将其集成到场景中。以下是具体实现步骤和示例: ### 一、准备工作 1. **申请天地图API密钥** 访问[天地图开放平台](https://www.tianditu.gov.cn/),注册账号并创建应用获取`API Key`[^2]。 2. **创建Unity项目** - 新建3D项目 - 创建空物体`MapController`并挂载脚本 ### 二、核心代码实现 ```csharp using System.Collections; using UnityEngine; using UnityEngine.Networking; public class TianDiMapLoader : MonoBehaviour { public string apiKey = "YOUR_API_KEY"; // 替换为你的密钥 public int zoomLevel = 10; // 缩放级别(1-18) public Vector2 centerLatLon = new Vector2(39.9042f, 116.4074f); // 北京坐标 void Start() { StartCoroutine(LoadMapTexture()); } IEnumerator LoadMapTexture() { // 坐标转瓦片编号 Vector2 tileXY = LatLonToTile(centerLatLon.x, centerLatLon.y, zoomLevel); // 构建请求URL(影像地图) string url = $"http://t0.tianditu.gov.cn/img_w/wmts?" + $"SERVICE=WMTS&REQUEST=GetTile&VERSION=1.0.0&" + $"LAYER=img&STYLE=default&TILEMATRIXSET=w&FORMAT=tiles&" + $"TILEMATRIX={zoomLevel}&TILEROW={(int)tileXY.y}&TILECOL={(int)tileXY.x}&tk={apiKey}"; using (UnityWebRequest webRequest = UnityWebRequestTexture.GetTexture(url)) { yield return webRequest.SendWebRequest(); if (webRequest.result != UnityWebRequest.Result.Success) { Debug.LogError($"加载失败: {webRequest.error}"); } else { // 创建平面并应用纹理 GameObject plane = GameObject.CreatePrimitive(PrimitiveType.Plane); plane.GetComponent<Renderer>().material.mainTexture = DownloadHandlerTexture.GetContent(webRequest); // 调整比例(Web墨卡托坐标系需要特殊处理) plane.transform.localScale = new Vector3(1, 1, 1); } } } Vector2 LatLonToTile(float lat, float lon, int zoom) { float n = Mathf.Pow(2, zoom); float x = (lon + 180) / 360 * n; float y = (1 - Mathf.Log(Mathf.Tan(lat * Mathf.Deg2Rad) + 1 / Mathf.Cos(lat * Mathf.Deg2Rad)) / Mathf.PI) / 2 * n; return new Vector2((int)x, (int)y); } } ``` ### 三、优化建议 1. **多瓦片加载**:根据相机视口动态计算需要加载的瓦片范围[^4] 2. **坐标转换**:使用`Web墨卡托投影`精确转换地理坐标到Unity世界坐标 3. **性能优化**: - 使用对象池管理瓦片对象 - 添加LOD控制细节级别[^1] - 启用背面剔除`Cull Back`减少渲染量[^4] ### 四、常见问题处理 1. **403 Forbidden错误**:检查API密钥是否有效且服务已开通 2. **纹理偏移**:需要精确计算墨卡托投影坐标 3. **问题**:确保使用支持的地图服务地址
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值