fetch,解决高德地图公共api,跨域问题

最新推荐文章于 2024-04-15 11:29:23 发布

冲动消费

最新推荐文章于 2024-04-15 11:29:23 发布

阅读量4.5k

点赞数 2

CC 4.0 BY-SA版权

分类专栏：高德地图文章标签：前端 javascript vue.js ajax跨域问题

本文链接：https://blog.youkuaiyun.com/weixin_50061893/article/details/119025099

高德地图专栏收录该内容

3 篇文章

订阅专栏

本文讲述了在开发中遇到的一个功能需求，即实现可选择街道的滚动功能。由于后端缺乏街道数据，因此从第三方获取，选择了高德地图API。然而，在调用API时遭遇了跨域问题（CORS）。通过研究fetch文档，成功利用fetch请求解决了跨域问题。对于本地项目跨域，可以借助devServer，而线上跨域则可以考虑fetch请求方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.功能需求

功能需求是需要做一个可以选择各街道的滚动功能,但是由于后端没有街道数据,只有自己去第三方寻找,最后用的高德地图的api. 预期效果如下

在这里插入图片描述

2.遇到的问题

不知什么情况,我在请求高德公共api的时候,遇到了跨域问题 CORS error.如下图

发送请求的方式
报错信息
在这里插入图片描述

3.解决的办法

通过查阅 fetch文档,并使用fetch解决了改跨域问题,如下图

在这里插入图片描述
请求成功
拿到数据
成功渲染

总结

遇到跨域需要前端解决的如果是本地项目跨域通过devServer来解决,线上有跨域问题的话,可以尝试fetch请求方式.

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

冲动消费

关注关注

2
点赞
踩
3

收藏

觉得还不错? 一键收藏
3
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

JAVA | Java 解决跨域问题

java_xiaoo的博客

09-19

885

引言我们在开发过程中经常会遇到前后端分离而导致的跨域问题，导致无法获取返回结果。跨域就像分离前端和后端的一道鸿沟，君在这边，她在那边，两两不能往来. 什么是跨域（CORS）跨域（CORS）是指不同域名之间相互访问。跨域，指的是浏览器不能执行其他网站的脚本，它是由浏览器的同源策略所造成的，是浏览器对于JavaScript所定义的安全限制策略。什么情况会跨域同一协议，如http或https 同一IP地址, 如127.0.0.1 同一端口, 如8080 以上三个条件中有一个条件不同就会产生

nginx服务器通过配置来解决API的跨域问题

09-30

在讨论nginx服务器解决API的跨域问题之前，我们首先要了解什么是跨域问题以及它出现的原因。跨域资源共享（CORS）是一个安全机制，用于限制网页上的JavaScript如何能够与不同源（域名、协议或端口）的服务器进行交互...

3 条评论您还未登录，请先登录后发表或查看评论

JS跨域问题详解

01-19

JavaScript是一种在Web开发中经常使用的前端动态脚本技术。在JavaScript中，有一个很重要的安全性限制，被称为“Same-Origin Policy”（同源策略）。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制，即JavaScript只能访问与包含它的文档在同一域下的内容。　　JavaScript这个安全策略在进行多iframe或多窗口编程、以及Ajax编程时显得尤为重要。根据这个策略，在baidu.com下的页面中包含的JavaScript代码，不能访问在google.com域名下的页面内容；甚至不同的子域名之间的页面也不能通过JavaScript代

由于查询高德地图天气开放接口跨域问题

KisJLLLLLL的博客

06-15

2034

所以我这边是起了两个request，单独来处理这个https://restapi.amap.com/v3/weather/weatherInfo开放式接口。最后发现是request接口中带了我们项目的cookie和extend中的credentials访问的导致。但是由于如果这个注释掉，其他地方的接口需要用到cookie的话就会获取不到数据。由于在本地和线上都跨域，我一开始配置了proxy，但是到线上是失效的。只需要把credentials: 'include'注释掉即可。这边只能通过请求拦截来解决。

前端使用高德天气，及解决跨域问题

前端小菜鸟也有人起的博客

04-15

999

前端获取天气，及解决跨域问题

高德地图API练习

伪伪的喵喵。。

03-04

1132

高德地图API练习通过对高得地图API的练习使用，对如何在网页中使用地图有了初步的认识，同时再次认识到学好javascript的重要性。使用方法获取API链接选择javaScript API 选择获取API 注册创建新应用，并获取Key值选择实例中心 - 参考示例代码进行开发效果图代码<!DOCTYPE html> <html lang="en"> <head> <meta

cesium跨域加载问题

02-20

Cesium主要通过XMLHttpRequest或Fetch API来请求外部资源，而这些API遵循浏览器的同源策略。为了解决这个问题，服务端需要设置允许跨域的HTTP响应头，通常是`Access-Control-Allow-Origin`。这个头可以指定哪些源...

高德地图js api 地图数据怎么下载

03-22

嗯，用户想知道如何通过高德地图JS API下载地图数据。首先，我需要回忆一下高德地图的API文档内容。根据引用[1]，高德地图的JS API 2.0文档应该是最相关的。不过，用户提到的下载数据可能涉及到几个方面，比如地图...

高德地图api路径规划react+node

03-19

要在 React 和 Node.js 项目中集成高德地图 API 并实现路径规划功能，可以通过以下方法完成。 #### 一、React 前端部分在前端使用 `react-native-amap-geolocation` 插件初始化高德地图 SDK，并通过其提供的接口...

VUE3 动态更新高德地图坐标点位置，根据API返回数据实时更新位置信息

最新发布

07-26

key: '您的高德API密钥', version: '2.0', plugins: ['AMap.Marker'] }).then(AMap => { map.value = new AMap.Map('map-container', { zoom: 13 }) createMarker(AMap) startPositionUpdates() // 开始位置...

高德地图定位相关API

liulinghuidage的博客

06-12

3878

一：如果是直接定位到当前位置，可以参考demo中的小蓝点功能。二：如果是根据得到的经纬度信息来定位到具体信息，可使用下面的API aMap.moveCamera(CameraUpdateFactory.newLatLngZoom(new LatLng(34.341568, 108.940174), 18));// 设置指定的可视区域地图，其中18代表的是缩放级别

高德地图 js api

巴萨，足球的艺术

06-19

2082

摘要：附近连锁店地图与全国连锁店地图，最大的区别就是： 1、附近连锁店地图需要先定位，然后搜索附近的店铺。 2、全国连锁店地图，是先选择城市，然后检索某城市内的全部门店信息。本文就详细讲解了如何制作附近实体店的地图，并调起高德地图进行导航，调起打电话功能。本文还详细讲解了如何设置支付宝服务、微信公众号、微博官方账号的地图功能。 ------------------------

高德地图通过地理位置转经纬度,报跨域问题解决方法 https://restapi.amap.com/v3/geocode/

qq_44410862的博客

06-14

4472

高德地图逆地理地址转经纬度

JS使用高德地图——跨域问题

linghugoolge的博客

12-25

6084

什么是跨域？怎么解决跨域问题？ http://blog.csdn.net/lambert310/article/details/51683775 https://www.cnblogs.com/wavky/p/4181320.html ...

高德地图api加载其他服务器上arcgis发布wms服务时候遇到跨域问题的解决方法

傲骨雄风的博客

07-23

4283

1.代码 var map = new AMap.Map("map", { zoom: 13, pitch: 50, showIndoorMap: false, showLabel: false, mapStyle: 'amap://styles/light', ...

小记：Vue3调用高德天气跨域问题的解决

weixin_40169609的博客

09-21

1827

关于如何申请高德API我就不多说了下面主要说一下代理的配置和访问值得注意的是，端口号一定要设置成8080，否则会报错。 '/weather':{ port:8080, target: 'https://restapi.amap.com/v3/weather', secure: false, // 如果是https接口，需要配置这个参数 changeOrigin: true, //是否跨域 pathRewrite: { '^/weathe.

盘点一下使用高德api踩得坑

m0_63338904的博客

08-31

2231

采用在vue项目下public公共资源包的index.html文件里面引用高德的cdnkey :你在高德开放平台里面申请的一个web服务key，注意:如果你要使用高德的搜索api，那么你一定要申请一个web服务型key，不然无法使用搜索apiplugin=AMap.Geolocation,导入高德地图的插件，并不是地图上使用的组件。这是第一个坑。...

前端解决 API 跨域的几种方式

river、的博客

11-16

4451

文章目录使用 webpack 配置代理使用 http-server 模块进行代理使用 nodejs 的 node-http-proxy 模块来处理使用 nginx 配置使用 webpack 配置代理 webpack 对于前端来说是个强大的工具, 除了能够帮助你打包和启动调试服务器外, 代理的功能也值得你了解下中文文档地址 webpack 印记中国最简单的配置 module.exports =...

跨域问题的解决

Az201706的博客

09-24

5312

跨域问题