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

最新推荐文章于 2025-01-19 09:55:06 发布

冲动消费

最新推荐文章于 2025-01-19 09:55:06 发布

阅读量4.1k

点赞数 2

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

本文链接：https://blog.csdn.net/weixin_50061893/article/details/119025099

版权

高德地图专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

摘要由CSDN通过智能技术生成

1.功能需求

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

在这里插入图片描述

2.遇到的问题

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

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

3.解决的办法

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

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

总结

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

冲动消费

关注关注

2
点赞
踩
2

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Fetch 跨域

显磊的博客

02-11

2万+

问题： fetch('http://localhost:3000/myWebSite/praise', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSO...

JAVA | Java 解决跨域问题

java_xiaoo的博客

09-19

847

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

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

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

KisJLLLLLL的博客

06-15

1160

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

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

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

04-15

779

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

高德地图API练习

伪伪的喵喵。。

03-04

1100

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

高德地图定位相关API

liulinghuidage的博客

06-12

3776

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

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

傲骨雄风的博客

07-23

4147

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

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

09-30

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

[WebApi]WebApi 跨域问题解决方案：CORS

德仔

01-17

1676

一、跨域问题的由来同源策略：出于安全考虑，浏览器会限制脚本中发起的跨站请求，浏览器要求JavaScript或Cookie只能访问同域下的内容。正是由于这个原因，我们不同项目之间的调用就会被浏览器阻止。比如我们最常见的场景：WebApi作为数据服务层，它是一个单独的项目，我们的MVC项目作为Web的显示层，这个时候我们的MVC里面就需要调用WebApi里面的接口取数据展现在页面上。因为我们的WebApi和MVC是两个不同的项目，所以运行起来之后就存在上面说的跨域的问题。二、跨域问题解决原理 CORS全称

XMLHttpRequest与Fetch API的跨域问题及解决办法

Ziuc的博客

01-17

3095

XMLHttpRequest XMLHttpRequest的跨域，是需要对方网站支持的，对方网站有相应的允许跨域的响应标头才可以。 JSONP的跨域实际上不是用XHR实现的，而是一个script标签，script是可以跨域的，回调函数作为get参数传入请求里。总之，不论是XHR的跨域，还是JSONP，都是需要对方网站提供支持，在对望愿意分享给你数据的情况下你才能得到。在对方没有提供支持的情况下，你是取不到它的数据的 Fetch API 与XHR2一样，fetch也是支持跨域请求的，只不过其跨域请求做法与

JS跨域问题详解

01-19

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

React如何解决fetch跨域请求时session失效问题

10-17

这样一来，既解决了跨域问题，又能确保fetch请求时携带session信息，从而避免session失效。总结来说，解决React fetch跨域请求时session失效的关键在于两步： 1. 在服务器端设置"Access-Control-Allow-Origin"响应...

Vue项目中跨域问题解决方案

08-27

在开发Vue项目时，我们经常会遇到跨域问题，这主要是由于浏览器的安全策略限制了不同源之间的请求。跨域问题可以通过多种方式解决，本文主要讲解在使用vue-cli搭建的项目中，如何通过更改Header和使用...

高德地图 js api

巴萨，足球的艺术

06-19

2060

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

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

linghugoolge的博客

12-25

6009

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

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

weixin_40169609的博客

09-21

1734

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

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

m0_63338904的博客

08-31

2100

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

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

river、的博客

11-16

4341

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

基于 WEB 开发的车辆租赁管理系统设计与实现

最新发布

Candy5204的博客

01-19

509

该系统可以实现车辆信息的在线管理、租赁订单的处理、客户信息的管理等功能，提高车辆租赁业务的效率和管理水平，为企业和客户提供更加便捷、高效的服务。同时，该系统还可以通过数据分析和统计，为企业提供决策支持，帮助企业更好地了解市场需求和客户需求，优化车辆配置和服务质量，提高企业的竞争力和盈利能力。它提供了一系列的功能和工具，使得用户可以方便地创建、存储、检索、更新和删除数据库中的数据。通过以上几张表的设计，我们可以实现对车辆租赁管理系统的基本功能，包括用户管理、车辆管理、租赁管理、订单管理和支付管理等。

webpack解决api跨域问题

12-05

Webpack 是一个现代 JavaScript 应用程序的静态模块打包工具，它可以通过配置来解决 API 跨域问题。跨域问题通常是由于浏览器的同源策略导致的，即浏览器不允许当前页面的脚本向不同源（协议、域名、端口任一不同）的服务器发送请求。在 Webpack 中，我们可以通过配置 `devServer` 来解决跨域问题。以下是几种常见的解决方法： ### 1. 使用 `proxy` 配置代理在 `webpack.config.js` 文件中配置 `devServer.proxy`，将特定的 API 请求代理到目标服务器。 ```javascript module.exports = { // 其他配置... devServer: { proxy: { '/api': { target: 'http://example.com', // 目标服务器 changeOrigin: true, // 是否改变原始主机头为目标 URL pathRewrite: { '^/api': '' } // 重写路径 } } } }; ``` ### 2. 使用 `before` 钩子自定义代理逻辑如果需要更复杂的代理逻辑，可以在 `devServer.before` 钩子中自定义中间件。 ```javascript module.exports = { // 其他配置... devServer: { before: function(app, server, compiler) { app.get('/api/*', (req, res) => { const url = `http://example.com${req.originalUrl}`; fetch(url) .then(response => response.json()) .then(data => res.json(data)) .catch(err => res.status(500).json({ error: 'Proxy error' })); }); } } }; ``` ### 3. 使用 `http-proxy-middleware` 中间件 `http-proxy-middleware` 是一个常用的中间件，可以更方便地配置代理。首先，安装 `http-proxy-middleware`： ```bash npm install --save-dev http-proxy-middleware ``` 然后，在 `webpack.config.js` 中配置： ```javascript const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = { // 其他配置... devServer: { before: function(app, server, compiler) { app.use( '/api', createProxyMiddleware({ target: 'http://example.com', changeOrigin: true, pathRewrite: { '^/api': '' } }) ); } } }; ``` 通过以上配置，Webpack 可以在开发环境下解决 API 跨域问题。