开启辅助访问     
收藏本站

站内搜索

搜索

Minecraft(我的世界)苦力怕论坛

[开发教程] 纯前端解决跨域问题最简方案(应该是)

 发表于 昨天 23:11 来自手机|显示全部楼层|阅读模式 IP:河北省
关于前端跨域问题
跨域问题一直是前端常见的大问题,前端想要获取非CORS网站数据或者API往往需要后端的help
对于前端开发者,在做一些项目时,特别是小项目,部署一台后端 一是麻烦,也没必要,二来开发和学习成本也会增加等等

解决方案
这里推荐一个Js库,public-server-api,PublicServer API非第三方js库,为前端提供部分后端功能,或者说提供一个公用的后端,其中当然包括发送http(s)请求的功能
你可以使用npm进行下载,也可以通过script标签引入
NPM: https://www.npmjs.com/package/public-server-api
CDN:(页面是跨域的,你也可以选择一些模块化库引入)
(无需魔法)

  1. <script src="https://publicserver.n-project.us.kg/client/client.js"></script>
复制代码

使用此库的时候无需任何秘钥与账号以及魔法(至少目前),无限制
另外此库也可以用于请求一些国内连接不上的网站
请求方法
此模块提供两种请求方法,一种是和fetch完全一样的
PublicServer.prototype.request 方法,你只需要会fetch就好了,学习成本几乎为0

  1. (async function(){
  2.   var myserver = new PublicServer()
  3.   var response = await myserver.request( "https://example.com" )
  4.   // example.com 不跨域
  5.   document.write( await response.text() )
  6.   // 写入页面
  7. })()
复制代码


另外一种就是 PublicServer.prototype.cat 方法,是一种简化方法,不过应对一些简单的场景还是绰绰有余的,也支持带数据Post

  1. (async function(){
  2.   var myserver = new PublicServer()
  3.   document.write( await myserver.cat( "https://example.com" ) )
  4.   
  5.   // 带参POST↓
  6.   await myserver.cat( "https://api.site", "POST", { /*请求主体*/ })
  7. })()
复制代码


(个人)优缺点评价

优点:
•使用方便
•学习与使用成本低
•限制少
•可以解决部分地域问题
•支持Node和浏览器双端,方便测试与api库的开发
•开源

缺点
•不能请求 127.0.0.1(localhost)
•目前(至少v1.0.5)不能使用相对路径
苦力怕论坛,感谢有您~
 发表于 昨天 23:30 来自手机|显示全部楼层 IP:0
《无需魔法》
Screenshot_2024-11-19-23-28-28-16_40deb401b9ffe8e1df2f1cc5ba480b12.jpg
2#昨天 23:30回复收起回复
苦力怕论坛,感谢有您~

本版积分规则

本站
关于我们
联系我们
坛史纲要
官方
哔哩哔哩
技术博客
下载
网易版
安卓版
JAVA
反馈
意见建议
教程中心
更多
捐助本站
QQ群
QQ群

QQ群

访问手机版

访问手机版

手机版|小黑屋|系统状态|klpbbs.com

粤公网安备 44200002445329号 | 由 木韩网络 提供支持 | GMT+8, 2024-11-20 04:29

声明:本站与Mojang以及微软公司没有从属关系

Powered by Discuz! X3.4 粤ICP备2023071842号-3