调用百度api出现的跨域问题

最新推荐文章于 2024-04-28 23:53:03 发布
最新推荐文章于 2024-04-28 23:53:03 发布
阅读量3k 收藏 3
点赞数 1
文章标签： nginx 百度
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_47459930/article/details/109050270
版权

在调用百度接口时，碰到了跨域的问题，在vue3.0中已经解决了这个跨域问题，但是在打包之后又遇到了这个跨域的问题，后端配置一下就好了，使用反向代理解决nginx

  1. 进行下载nginx文件下载nainx链接
    在这里插入图片描述
  2. 将打包好的dist文件复制到文件中的HTML文件中,替换掉html文件中的两个文件。
    在这里插入图片描述
  3. 接下来的几步就可以看这个文章里面的内容，vue调用百度api时跨域问题的解决方案
    ~~文章里面说的nginx的配置文件在conf文件中的nginx.conf文件中配置即可。
    在这里插入图片描述
  4. 然后就是有重启服务器
    start nginx 启动nginx
    nginx -s stop 强制停止Nginx服务
    nginx -s quit 优雅地停止Nginx服务
～◎洁宝ぼ
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Nginx处理跨域问题
kerolalala的博客
02-04 2267
xx项目有个需求，我们的web项目首页需要展示“实时天气”，但提供天气数据的接口是来自业主那边的一个独立项目，且部署在其他服务器上。 现场环境项目地址：http://10.5.11.19:8089/AVMS 天气服务接口地址：http://10.5.15.8:8080/dam/service/weather?token=QdSEhR2d&appKey=ff808081783a60d001785da57230003d&endtime=202106221614 如果我们在前端直接发
WebGIS从基础到开发实践代码(基于ArcGIS API for JavaScript)
06-08
第1章Web GIS基础 1.1GIS及相关技术的发展 1.1.1Web开发技术的发展 1.1.2GIS的发展 1.1.3Web服务的发展 1.1.4Web GIS的发展 1.2OGC的Web服务规范 1.2.1OWS服务体系 1.2.2空间信息Web服务的角色与功能 1.2.3空间信息Web服务的系统框架 1.2.4OWS中的常用服务 1.2.5服务的请求与响应 1.3REST及REST风格的Web服务 1.3.1REST中的基础知识 1.3.2REST风格的Web服务 1.3.3REST风格的Web服务实例 1.4Web GIS的组成 1.5ArcGIS Server REST风格的Web服务 1.5.1ArcGIS S erver站点的架构 1.5.2ArcGIS Server发布的服务类型 1.5.3服务发布 1.5.4Web服务的URL及元数据 1.5.5查看地图 1.5.6使用ArcGIS Server REST风格Web服务的过程 1.5.7支持的输出格式 第2章ArcGIS API for JavaScript基础 2.1ArcGIS API for JavaScript版的Hello World 2.2ArcGIS API for JavaScript与Dojo 2.2.1ArcGIS API for JavaScript的构成 2.2.2ArcGIS API for JavaScript与Dojo的关系 2.3开发与调试工具 2.3.1集成开发环境 2.3.2调试工具 2.3.3Firebug 2.3.4其他工具软件 2.4Dojo基础知识 2.4.1JavaScript对象 2.4.2函数也是对象 2.4.3模拟类与继承 2.4.4使用模块与包管理源代码 第3章页面布局设计 3.1使用布局小部件设计页面框架 3.1.1小部件与布局小部件简介 3.1.2使用面板组织页面元素 3.1.3使用容器小部件设计页面布局 3.2可移动的小部件微架构 3.2.1自定义小部件的基础知识 3.2.2内容小部件的基类实现 3.2.3可移动的框架小部件 3.2.4测试 3.3集中控制的小部件微架构 3.3.1可集中控制的框架小部件 3.3.2小部件容器 3.3.3测试 3.3.4订阅／发布模式的事件处理机制 3.4使用菜单组织功能 3.4.1菜单容器小部件 3.4.2菜单项小部件 3.4.3菜单小部件 3.4.4测试 第4章地图与图层 4.1图层操作 4.1.1图层类及其之间的继承关系 4.1.2切片地图图层 4.1.3动态地图图层 4.1.4图形图层 4.1.5带地理参考的影像图层 4.1.6 KML图层 4.2自定义图层 4.2.1自定义动态图层——热度图图层 4.2.2自定义切片地图图层——百度地图 4.2.3自定义图层——三维建筑图 4.3地图操作 4.3.1地图窗口操作 4.3.2地图属性获取 4.3.3事件处理 4.4地图参数的基本配置 4.4.1漫游与缩放动画的参数配置 4.4.2比例滚动条的参数配置 4.4.3跨域访问参数配置 4.5图层控制器 4.5.1图层控制器小部件模板 4.5.2图层控制器小部件类 4.5.3图层控制器小部件的使用 第5章空间参考系统与几何对象 5.1空间参考系统 5.1.1空间参考系统类 5.1.2参考系统转换 5.2几何对象 5.2.1几何对象类及其之间的继承关系 5.2.2几何对象的绘制 5.2.3几何对象相关的功能模块 第6章符号与图形 6.1符号 6.1.1标记符号 6.1.2线符号 6.1.3填充符号 6.1.4文本符号 6.2图形 6.2.1图形对象的构成
jQuery 1.6 API 中文版
12-29
jQuery.ajax( url, [ settings ] ) 返回: jqXHR 执行一个异步的HTTP（Ajax）的请求。 version added: 1.5jQuery.ajax( url, [ settings ] ) url一个用来包含发送请求的URL字符串。 settings一个以"{键:值}"组成的AJAX 请求设置。所有选项都是可选的。可以使用$.ajaxSetup()设置任何默认参数。看jQuery.ajax( settings )下所有设置的完整列表。 version added: 1.0jQuery.ajax( settings ) settings一个以"{键:值}"组成的AJAX 请求设置。所有选项都是可选的。可以使用$.ajaxSetup()设置任何默认参数。 acceptsMap 默认： 取决于数据类型 内容类型发送请求头，告诉服务器什么样的响应会接受返回。如果accepts设置需要修改，推荐在$.ajaxSetup()方法中做一次。 asyncBoolean 默认： true 默认设置下，所有请求均为异步请求（也就是说这是默认设置为true）。如果需要发送同步请求，请将此选项设置为 false。跨域请求和dataType: "jsonp"请求不支持同步操作。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。 beforeSend(jqXHR, settings)Function 发送请求前可修改 jqXHR（在jQuery 1.4.x的中，XMLHttpRequest） 对象的函数，如添加自定义 HTTP 头等。该jqXHR和设置作为参数传递的。这是一个Ajax事件 。beforeSend行数返回的false将取消该请求。在jQuery 1.5， beforeSend选项将被访问，不管请求的类型。 cacheBoolean 默认： true, dataType为"script"和"jsonp"时默认为false 如果设置为 false ，浏览器将不缓存此页面。 complete(jqXHR, textStatus)Function, Array 请求完成后回调函数 (请求成功或失败之后均调用)。这个回调函数得到2个参数： jqXHR (in jQuery 1.4.x, XMLHTTPRequest) 对象和一个描述成功请求类型的字符串("success", "notmodified", "error","timeout", or "parsererror") 。在jQuery 1.5， complete设置可以接受一个函数的数组。每个函数将被依次调用。这是一个Ajax事件 。 contents(added 1.5)Map 一个以"{字符串:正则表达式}"配对的对象，用来确定jQuery将如何解析响应，给定其内容类型。 contentTypeString 默认: 'application/x-www-form-urlencoded' 发送信息至服务器时内容编码类型。默认值是"application/x-www-form-urlencoded"，适合大多数情况。如果你明确地传递了一个content-type给 $.ajax() 那么他必定会发送给服务器（即使没有数据要发送）。数据将总是使用UTF-8字符集传递给服务器；你必须译码这适当的在服务器端。 contextObject 这个对象用于设置Ajax相关回调函数的上下文。也就是说，让回调函数内this指向这个对象（如果不设定这个参数，那么this就指向调用本次AJAX请求时传递的options参数）。比如指定一个DOM元素作为context参数，这样就设置了success回调函数的上下文为这个DOM元素。就像这样： $.ajax({ url: "test.html", context: document.body, success: function(){ $(this).addClass("done"); } });
纯前端网站（无后端服务）调用第三方api，如何解决跨域问题
sinat_40408885的博客
03-12 703
纯前端网站（无后端服务）调用第三方api，网站挂在了阿里云的oss中没法使用ngnix实现跨域时，使用Jsonp解决跨域问题
关于vue-cli使用本地API代理解决跨域问题的整个流程
08-15
关于vue-cli使用本地API代理解决跨域问题的整个流程：包括新建项目到跨域获取数据 关于vue-cli使用本地API代理解决跨域问题的整个流程 关于vue-cli使用本地API代理解决跨域问题的整个流程
java调用百度翻译接口简单实例
04-09
纯java(没有使用第三方的jar包)调用百度翻译接口的简单实例.
语音演示：语音api示例
02-05
演讲演示 项目地址： : 文档地址： 语音识别： ://ai.baidu.com/docs#/ASR-API/top 语音合成： ://ai.baidu.com/docs#/TTS-API/top 百度语音rest api调用语音识别，语音合成示例 Rest API接口为http访问，任意操作系统，任意语言，只要能对baidu域名发起http请求的，均可以使用。 百度语音合成的接口支持跨域，但是获取令牌的接口不支持。浏览器直接发请求的示例见： : 简介 以JAVA PHP python C BASH作为示例，展示api的调用过程，选择一个运行即可。 目录结构 +--rest-api
vue调用百度api时跨域的解决方案
ybb_ymm的专栏
07-04 2494
今天在开发一个项目中发现vue前端调用百度ocr识别接口出现了跨域问题！百度api 的接口： https://aip.baidubce.com/oauth/2.0/token接下来我们看看如何解决我们用ngxin配置，具体如下： 这样就可以完美解决跨域问题了更多编程内容，请扫码关注《coder练习生》，如果觉得有用，也可赠送作者一杯咖啡...
百度地图坐标转换及跨域
SieSteven
10-24 1893
前言 调用 api将实际经纬度转换为百度坐标系的经纬度。 想要的效果 效果如图，左侧为百度地图，需要与右侧地图联动。 通过百度地图离线js调用，总是报跨域错误。以为是js版本不对，查了一下没问题。 网友这种方式处理的回调函数根本不起作用 //坐标转换完之后的回调函数 translateCallback = function (data){ if(data.status ...
百度地图API调用跨域问题解决
最新发布
qq_42145991的博客
04-28 275
使用vue-jsonp解决百度地图API调用跨域问题
百度OCR识别+前端部署nginx
HonaOne的博客
08-01 825
自己记录 前端调用百度ocr识别
nginx正向代理访问百度地图API
weixin_34344677的博客
09-30 708
正向代理的概念 正向代理,也就是传说中的代理,他的工作原理就像一个跳板,简单的说,我是一个用户,我访问不了某网站,但是我能访问一个代理服务器这个代理服务器呢,他能访问那个我不能访问的网站于是我先连上代理服务器,告诉他我需要那个无法访问网站的内容代理服务器去取回来,然后返回给我 从网站的角度,只在代理服务器来取内容的时候有一次记录有时候并不知道是用户的请求,也隐藏了用户的资料,这取决于代理告不告...
nginx转发百度地图api
中国华的博客
11-06 2099
http://127.0.0.1:9081/baiduapi/geocoding/v3/?address=a&output=json&ak=bygaIM87owKb9ujCXL18IO8IIEGZRtjO&callback=showLocation ==> https://api.map.baidu.comgeocoding/v3/?address=a&o...
发布离线地图的多个方法
u014220146的博客
05-28 1588
以下因为略懂，所以只是列举 1. 下载地图文件 地图供应商一般腾讯地图、高德地图、百度地图、谷歌地图等等 下载地图文件的工具有很多，包括付费的或免费的，常见的工具有： 全能电子地图下载器 BIGEMAP openStreeMap（开源） 国家地理信息公共服务平台 水经注 迈高图 太乐地图 地图编辑工具有 arcgis desktop arcmap qgis（开源） 地图文件的格式有 shp tiff bmp osm 瓦片地图（png,jpg) 2. 发布离线地图服务 geoserve
记阿里云SLB后配置Nginx反向代理百度地图API的坑
weixin_34329187的博客
09-03 808
需求： 百度的原始请求：https://api.map.baidu.com/place/v2/suggestion?query=s&region=sc&city_limit=true&output=json&ak=dl0tuE2WhjbHyqKcHevxXRYnLjV53OZm 代理为： https://api.example.com/proxy/baidu/sug...
企业内网反向代理百度地图服务
weixin_33894640的博客
01-07 460
2019独角兽企业重金招聘Python工程师标准>>> ...
vue项目中 调用 第三方api 如百度地图 跨域问题
AAAXiaoApple的博客
01-06 8575
1- 安装 yarn add vue-baidu-map-v3 2-引入 注册 main.js 文件 import BaiduMap from "vue-baidu-map-v3"; Vue.use(BaiduMap, { ak: "XA59389SXZZZZVRNWexLJSOde7AAHzVAAAuStbP999Swpmf7", }); 3- public下的index.html 文件 4- 解决 跨域问题 （目前项目中使用的是 第一种方案，开发环境中可以，线上环境的话需要后台配合改下 代
案例——跨域调用百度接口
木易一
05-13 1387
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .block{ width: 600px; heig...
uni-app解决百度API h5跨域问题
XuChangLu的博客
06-26 1149
// manifest.json "h5": { "devServer": { "port": 8080, //端口号 "disableHostCheck": true, "proxy": { "/api": { "target": "https://aip.baidubce.com/oauth/2.0/token", //目标接口域名 "changeOrigin": true, //是否跨域 "secure": false, // 设置支持h.
fastapi解决跨域问题
11-30
解决fastapi跨域问题的方法是使用fastapi.middleware.cors库。该库提供了一个CORSMiddleware类，可以轻松地添加CORS（跨源资源共享）支持。以下是解决fastapi跨域问题的步骤： 1. 安装fastapi.middleware.cors库 ```shell pip install fastapi.middleware.cors ``` 2. 导入CORSMiddleware类 ```python from fastapi.middleware.cors import CORSMiddleware ``` 3. 创建一个中间件实例 ```python app = FastAPI() origins = [ "http://localhost", "http://localhost:8080", ] app.add_middleware( CORSMiddleware, allow_origins=origins, allow_credentials=True, allow_methods=["*"], allow_headers=["*"], ) ``` 在上面的代码中，我们创建了一个名为app的FastAPI实例，并定义了一个名为origins的列表，其中包含允许的来源。然后，我们创建了一个CORSMiddleware实例，并将其添加到应用程序中。在这个例子中，我们允许来自origins列表中的任何来源，允许凭据，允许任何方法和任何标头。 4. 运行应用程序并测试跨域请求 ```python if __name__ == "__main__": uvicorn.run(app, host="0.0.0.0", port=8000) ``` 在上面的代码中，我们使用uvicorn运行应用程序，并将其绑定到0.0.0.0:8000。现在，我们可以使用任何跨域请求测试我们的应用程序。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值