纯前端解决跨域问题最简方案(应该是)
关于前端跨域问题跨域问题一直是前端常见的大问题,前端想要获取非CORS网站数据或者API往往需要后端的help
对于前端开发者,在做一些项目时,特别是小项目,部署一台后端 一是麻烦,也没必要,二来开发和学习成本也会增加等等
解决方案
这里推荐一个Js库,public-server-api,PublicServer API非第三方js库,为前端提供部分后端功能,或者说提供一个公用的后端,其中当然包括发送http(s)请求的功能
你可以使用npm进行下载,也可以通过script标签引入
NPM: https://www.npmjs.com/package/public-server-api
CDN:(页面是跨域的,你也可以选择一些模块化库引入)
(无需魔法)
<script src="https://publicserver.n-project.us.kg/client/client.js"></script>
使用此库的时候无需任何秘钥与账号以及魔法(至少目前),无限制
另外此库也可以用于请求一些国内连接不上的网站
请求方法
此模块提供两种请求方法,一种是和fetch完全一样的
PublicServer.prototype.request 方法,你只需要会fetch就好了,学习成本几乎为0
(async function(){
var myserver = new PublicServer()
var response = await myserver.request( "https://example.com" )
// example.com 不跨域
document.write( await response.text() )
// 写入页面
})()
另外一种就是 PublicServer.prototype.cat 方法,是一种简化方法,不过应对一些简单的场景还是绰绰有余的,也支持带数据Post
(async function(){
var myserver = new PublicServer()
document.write( await myserver.cat( "https://example.com" ) )
// 带参POST↓
await myserver.cat( "https://api.site", "POST", { /*请求主体*/ })
})()
(个人)优缺点评价
优点:
•使用方便
•学习与使用成本低
•限制少
•可以解决部分地域问题
•支持Node和浏览器双端,方便测试与api库的开发
•开源
缺点
•不能请求 127.0.0.1(localhost)
•目前(至少v1.0.5)不能使用相对路径 《无需魔法》
跨域问题还是推荐从后端解决
你需要在你的 Server 端使用 Access-Control-Allow-Origin 头部声明“来自哪些域名的跨域调用是被允许的” 林梦泽 发表于 2024-11-20 06:55
跨域问题还是推荐从后端解决
你需要在你的 Server 端使用 Access-Control-Allow-Origin 头部声明“来自哪些 ...
推荐 Vercel + serverless
学习成本低也方便廉价,nodejs也有fetch函数,所以也不用特别去学node:http模块
页: [1]