纯前端解决跨域问题最简方案(应该是)

关于前端跨域问题
跨域问题一直是前端常见的大问题，前端想要获取非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. 
   
2. <script src="https://publicserver.n-project.us.kg/client/client.js"></script>
   

复制代码

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

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

复制代码

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

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

复制代码

(个人)优缺点评价

优点:
•使用方便
•学习与使用成本低
•限制少
•可以解决部分地域问题
•支持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模块