纯前端网站(无后端服务)调用第三方api，如何解决跨域问题
ztj100 2024-12-04 17:11 22 浏览 0 评论
在网站开发时，经常要调用第三方api（比如百度统计api，对站点访问量等信息进行统计），碰到跨域cors问题，如果有后端服务解决起来就比较简单了，但本文要说的是没有后端服务的情况该如何解决。
一、开发环境
根据使用前端框架不同，在vue.config.js或config\index.js的devServer或dev中添加proxy或proxyTable，归根结底，都是在devServer中添加proxy：
注意secure的值，我的情况是http站点调用了https的api，此处如果设置为true，会导致检查证书时找不到而报出500的错误，设置为false就没问题了。
按以上设置好以后，直接按以下方式使用即可，比如：
原api的调用方式为：
axios.get('https://openapi.baidu.com/rest/2.0/tongji/report/getData?access_token=xxxx)
设置后的api调用方式为：
axios.defaults.baseURL = "/bdapi";
axios.get(/rest/2.0/tongji/report/getData?access_token=xxxx)
二、生产环境
以上代理方式是不支持生产环境的，一般都是建议后端设置跨域，但是对于无后端服务页面该如何做呢，网上说可以使用jsonp的方式，本想用相关插件，比如npm的jsonp或vue-jsonp，但感觉文档太少，按网上说的设置后也不好用，于是干脆直接手撸了。
先定义一个全局回调函数：
调用前先删除已存在的script标签，每次想调用api时通过插入script即可发起请求。
但貌似jsonp这种方式不是太推荐了，还有可能第三方api不支持jsonp，以上百度统计按这种方式是没问题的。如果不支持的话，就得考虑换其他方法了，纯前端实在不行的话，那就不得不考虑加一个后端服务了。
相关推荐
- 电脑装系统用GHOST好，还是原装版本好?老司机都是这么装的
-
Hello大家好，我是兼容机之家的咖啡。安装Windows系统是原版ISO好还是ghost好呢？针对这个的问题，我们先来科普一下什么是ghost系统，和原版ISO镜像两者之间有哪些优缺点。如果是很了解...
- 苹果 iOS 14.5.1/iPadOS 14.5.1 正式版发布
-
IT之家5月4日消息今日凌晨，苹果发布了iOS14.5.1与iPadOS14.5.1正式版更新。这一更新距iOS14.5正式版发布过去了一周时间。IT之家了解到，苹果表示，...
- iOS 13.1.3 正式版发布 包含错误修复和改进
-
苹果今天发布了iOS13.1.3和iPadOS13.1.3，这是iOS13发布之后第四个升级补丁。iOS13.1.2两周前发布。iOS13.1.3主要包括针对iPad和...
- 还不理解 Error 和 Exception 吗，看这篇就够了
-
在Java中的基本理念是结构不佳的代码不能运行，发现错误的理想时期是在编译期间，因为你不用运行程序，只是凭借着对Java基本理念的理解就能发现问题。但是编译期并不能找出所有的问题，有一些N...
- Linux 开发人员发现了导致 MacBook“无法启动”的 macOS 错误
-
“多个严重”错误影响配备ProMotion显示屏的MacBookPro。...
- 启动系统时无法正常启动提示\windows\system32\winload.efi
-
启动系统时无法正常启动提示\windows\system32\winload.efi。该怎么解决？ 最近有用户遇到了开机遇到的问题，是Windows未能启动。原因可能是最近更改了硬件或软件。虽然提...
- 离线部署之两种构建Ragflow镜像的方式，dify同理
-
在实际项目交付过程中，经常遇到要离线部署的问题，生产服务器无法连接外网，这时就需要先构建好ragflow镜像，然后再拷到U盘或刻盘，下面介绍两种构建ragflow镜像的方式。性能测试（网络情况好的情况...
- Go语言 error 类型详解（go语言 异常）
-
Go语言的error类型是用于处理程序运行中错误情况的核心机制。它通过显式的返回值（而非异常抛出）来管理错误，强调代码的可控性和清晰性。以下是详细说明及示例：一、error类型的基本概念内置接口...
- Mac上“闪烁的问号”错误提示如何修复?
-
现在Mac电脑的用户越来越多，Mac电脑在使用过程中也会出现系统故障。当苹果电脑无法找到系统软件时，Mac会给出一个“闪烁的问号”的标志。很多用户受到过闪烁问号这一常见的错误提示的影响，如何解决这个问...
- python散装笔记——177 sys 模块（python sys模块详解）
-
sys模块提供了访问程序运行时环境的函数和值，例如命令行参数...
- 30天自制操作系统:第一天（30天自制操作系统电子书）
-
因为咱们的目的是为了研究操作系统的组成，所以直接从系统启动的第二阶段的主引导记录开始。前提是将编译工具放在该文件目录的同级目录下，该工具为日本人川合秀实自制的编译程序，优化过的nasm编译工具。...
- 五大原因建议您现在不要升级iOS 13或iPadOS
-
今天苹果放出了iPadOS和iOS13的公测版本，任何对新版功能感兴趣的用户都可以下载安装参与测试。除非你想要率先体验Dark模式，以及使用AppleID来登陆Facebook等服务，那么外媒CN...
- Python安装包总报错?这篇解决指南让你告别pip烦恼!
-
在Python开发中，...
- 苹果提供了在M1 Mac上修复macOS重装错误的方案
-
#AppleM1芯片#在苹果新的M1Mac推出后不久，我们看到有报道称，在这些机器上恢复和重新安装macOS，可能会导致安装错误，使你的Mac无法使用。具体来说，错误信息如下："An...
- 黑苹果卡代码篇三:常见卡代码问题，满满的干货
-
前言...
欢迎 你 发表评论:
- 一周热门
- 最近发表
-
- 电脑装系统用GHOST好，还是原装版本好?老司机都是这么装的
- 苹果 iOS 14.5.1/iPadOS 14.5.1 正式版发布
- iOS 13.1.3 正式版发布 包含错误修复和改进
- 还不理解 Error 和 Exception 吗，看这篇就够了
- Linux 开发人员发现了导致 MacBook“无法启动”的 macOS 错误
- 启动系统时无法正常启动提示\windows\system32\winload.efi
- 离线部署之两种构建Ragflow镜像的方式，dify同理
- Go语言 error 类型详解（go语言 异常）
- Mac上“闪烁的问号”错误提示如何修复?
- python散装笔记——177 sys 模块（python sys模块详解）
- 标签列表
-
- idea eval reset (50)
- vue dispatch (70)
- update canceled (42)
- order by asc (53)
- spring gateway (67)
- 简单代码编程 贪吃蛇 (40)
- transforms.resize (33)
- redisson trylock (35)
- 卸载node (35)
- np.reshape (33)
- torch.arange (34)
- node卸载 (33)
- npm 源 (35)
- vue3 deep (35)
- win10 ssh (35)
- exceptionininitializererror (33)
- vue foreach (34)
- idea设置编码为utf8 (35)
- vue 数组添加元素 (34)
- std find (34)
- tablefield注解用途 (35)
- python str转json (34)
- java websocket客户端 (34)
- tensor.view (34)
- java jackson (34)