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

最新推荐文章于 2023-06-15 17:24:07 发布
最新推荐文章于 2023-06-15 17:24:07 发布
阅读量3.2k 收藏 2
点赞数 2
分类专栏： 高德地图 文章标签： 前端 javascript vue.js ajax跨域问题
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50061893/article/details/119025099
版权

目录

1.功能需求

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

在这里插入图片描述

2.遇到的问题

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

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

3.解决的办法

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

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

总结

遇到跨域需要前端解决的如果是本地项目跨域通过devServer来解决,线上有跨域问题的话,可以尝试fetch请求方式.
冲动消费
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
详解React Native 采用Fetch方式发送跨域POST请求
08-28
主要介绍了详解React Native 采用Fetch方式发送跨域POST请求，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
JS跨域问题详解
01-19
JavaScript是一种在Web开发中经常使用的前端动态脚本技术。在JavaScript中，有一个很重要的安全性限制，被称为“Same-Origin Policy”（同源策略）。这一策略对于JavaScript代码能够访问的页面内容做了很重要的限制，即JavaScript只能访问与包含它的文档在同一域下的内容。 　　JavaScript这个安全策略在进行多iframe或多窗口编程、以及Ajax编程时显得尤为重要。根据这个策略，在baidu.com下的页面中包含的JavaScript代码，不能访问在google.com域名下的页面内容；甚至不同的子域名之间的页面也不能通过JavaScript代
react中fetch之cors跨域请求的实现方法
08-27
本篇文章主要介绍了react中fetch之cors跨域请求的实现方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
React如何解决fetch跨域请求时session失效问题
10-17
主要给大家介绍了关于React如何解决fetch跨域请求时session失效问题的相关资料，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
JS使用高德地图——跨域问题
linghugoolge的博客
12-25 5869
什么是跨域？怎么解决跨域问题？ http://blog.csdn.net/lambert310/article/details/51683775 https://www.cnblogs.com/wavky/p/4181320.html ...
由于查询高德地图天气开放接口跨域问题
KisJLLLLLL的博客
06-15 767
所以我这边是起了两个request，单独来处理这个https://restapi.amap.com/v3/weather/weatherInfo开放式接口。最后发现是request接口中带了我们项目的cookie和extend中的credentials访问的导致。但是由于如果这个注释掉，其他地方的接口需要用到cookie的话就会获取不到数据。由于在本地和线上都跨域，我一开始配置了proxy，但是到线上是失效的。只需要把credentials: 'include'注释掉即可。这边只能通过请求拦截来解决。
高德地图api加载其他服务器上arcgis发布wms服务时候遇到跨域问题的解决方法
傲骨雄风的博客
07-23 3837
1.代码 var map = new AMap.Map("map", { zoom: 13, pitch: 50, showIndoorMap: false, showLabel: false, mapStyle: 'amap://styles/light', ...
前端解决 API 跨域的几种方式
river、的博客
11-16 4089
文章目录使用 webpack 配置代理使用 http-server 模块进行代理使用 nodejs 的 node-http-proxy 模块来处理使用 nginx 配置 使用 webpack 配置代理 webpack 对于前端来说是个强大的工具, 除了能够帮助你打包和启动调试服务器外, 代理的功能也值得你了解下 中文文档地址 webpack 印记中国 最简单的配置 module.exports =...
JAVA | Java 解决跨域问题
java_xiaoo的博客
09-19 757
引言 我们在开发过程中经常会遇到前后端分离而导致的跨域问题，导致无法获取返回结果。跨域就像分离前端和后端的一道鸿沟，君在这边，她在那边，两两不能往来. 什么是跨域（CORS） 跨域（CORS）是指不同域名之间相互访问。跨域，指的是浏览器不能执行其他网站的脚本，它是由浏览器的同源策略所造成的，是浏览器对于JavaScript所定义的安全限制策略。 什么情况会跨域 同一协议， 如http或https 同一IP地址, 如127.0.0.1 同一端口, 如8080 以上三个条件中有一个条件不同就会产生
跨域问题的解决
Az201706的博客
09-24 4419
跨域问题
stencil-fetch:使用Stenciljs提取API实现
05-02
stencil-fetch是使用构建的Web组件，它使您可以使用 。 入门 要尝试此组件，请执行以下操作： git clone [email protected]:Fdom92/stencil-fetch.git cd my-app git remote rm origin 并运行： npm install npm ...
高德地图通过地理位置转经纬度,报跨域问题解决方法 https://restapi.amap.com/v3/geocode/
qq_44410862的博客
06-14 2905
高德地图逆地理地址转经纬度
9种常见的前端跨域解决方案（详解）
热门推荐
zh0623的博客
03-25 2万+
文章转载自：9种常见的前端跨域解决方案（详解）_慕课手记 (imooc.com) 一、什么是跨域？   在前端领域中，跨域是指浏览器允许向服务器发送跨域请求，从而克服Ajax只能同源使用的限制。 什么是同源策略？   同源策略是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。   同源策略限
高德地图api 地理编码（地址--＞坐标）geocoder.getLocation在官方可以测试出结果，下载代码到本地却用不了 问题解决
大头皮鞋的博客
05-08 1921
geocoder.getLocation在官方可以测试出结果，下载代码到本地却用不了 问题的解决。
使用VUE的axios解决调用百度地图api的跨域访问问题
qq_44833403的博客
07-28 4642
使用VUE的axios解决调用百度地图api的跨域访问问题： 在构建一个vue前后端分离的项目时候，需要用到百度地图提供的web服务，但是在使用axios方式发送get请求的时候，web页面不显示相应结果，在Google中按F12进入开发者模式之后，发现提示如下： XMLHttpRequest cannot load Origin http://localhost:8080 is not allowed by Access-Control-Allow-Origin. 根据网上的搜索结果，这应该是跨域调用问
盘点一下使用高德api踩得坑
m0_63338904的博客
08-31 1736
采用在vue项目下public公共资源包的index.html文件里面引用高德的cdnkey :你在高德开放平台里面申请的一个web服务key，注意:如果你要使用高德的搜索api，那么你一定要申请一个web服务型key，不然无法使用搜索apiplugin=AMap.Geolocation,导入高德地图的插件，并不是地图上使用的组件。这是第一个坑。...
【vue】- 请求接口的跨域处理
m0_55960697的博客
06-16 3987
有四种方案： JSONP CORS webpack反向代理 fetch方法
小记：Vue3调用高德天气跨域问题的解决
weixin_40169609的博客
09-21 1481
关于如何申请高德API我就不多说了 下面主要说一下代理的配置和访问 值得注意的是，端口号一定要设置成8080，否则会报错。 '/weather':{ port:8080, target: 'https://restapi.amap.com/v3/weather', secure: false, // 如果是https接口，需要配置这个参数 changeOrigin: true, //是否跨域 pathRewrite: { '^/weathe.
高德地图解决逆地理坐标问题
小巧r的博客
09-05 956
逆地理坐标：即从经纬度，转化为城市名称。 步骤： 申请key 高德api文档 开始传参请求， fetch处理跨域， 接口返回数据各种转化，异步数据处理。 可视化展示 总结：当没有按照预期效果运行时，不要觉得自己没问题，要按照步骤一步一步排查可能没出现预期效果的原因。 ...
vue解决前后端跨域问题的代码
最新发布
09-22
解决 Vue 中前后端跨域问题的代码如下： 1. 在 Vue 项目的根目录下创建 vue.config.js 文件，在该文件中添加代码： ``` module.exports = { devServer: { proxy: { '/api': { target: 'http://localhost:8080', changeOrigin: true, ws: true, pathRewrite: { '^/api': '' } } } } } ``` 2. 在代码中发送请求时，使用 /api 代替真实的地址，例如： ``` axios.get('/api/data') .then(function (response) { console.log(response.data); }) .catch(function (error) { console.log(error); }); ``` 这样就可以解决 Vue 项目中前后端跨域问题了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值