如何跨域访问的两种方法~

本文详细介绍了两种常见的跨域请求处理方法:JSONP和CORS。JSONP通过利用<script>标签的特性实现跨域数据获取,而CORS则依赖于服务器端的响应头设置来允许跨域请求。文章对比了两者的实现原理和应用场景。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1. JSONP,需要客户端与服务端配合
    什么是:填充式JSON——JSON with Padding
    何时: 今后跨域,首选jsonp
    如何:
     基本思想:用其它可以跨域请求的元素,代替ajax
     程序中都是用<script>元素代替ajax发送请求
     方案一:
      1. 服务端: 将要返回的数据,填充进一条字符串格式的js语句中,组成一条正确的可执行的js语句,再返回
      2. 客户端: 添加<script src="服务器端地址">
      结果: script可跨域请求到服务器返回的js语句,并在客户端立刻执行。
      问题: 服务端返回的js语句是写死的,众口难调。
     方案二:
      1. 服务端: 返回一条自定义函数的调用语句
        要求客户端必须执行指定名称的函数
      2. 客户端: 提前定义一个与服务端同名的函数
        函数有一个参数可接受服务器端的数据
        函数内可执行任意操作
      问题: 函数名是写死的,极容易发生冲突!
     方案三:
      1. 服务端:接受一个函数名参数
                 将客户端发来的函数名参数拼接到js语句的开头!
      2. 客户端:<script src="地址?参数名=本地函数名"
      问题: script是写死的!只能在页面加载时请求一次
     方案四:
      1. 服务端不变
      2. 客户端: 动态创建script元素
        script只要被加到页面上,就立刻自动请求
        问题: script不断累积
        解决: 在回调函数中自动删除script
    其实: $.ajax也支持jsonp
     $.ajax({
       ... ,
       dataType:"jsonp",
       ...
     })
     强调: dataType:"jsonp"需要服务器端配合才能实现。
     其实,dataType:"jsonp"的原理和方案四一致:
      1. 也是通过在head中动态添加<script>发送请求
      2. 也是通过?callback=函数名,发送函数名到服务端
      3. 函数名其实是$.ajax自动为success函数生成的随机函数名。
  2. CORS,只要服务器端允许即可
    在服务器端添加响应头: node中:
       res.writeHead(200,{
         "Content-Type":"application/json;charset=utf-8",
         "Access-Control-Allow-Origin":"指定来源域名"|"*"
       })

转载于:https://www.cnblogs.com/lianer88/p/9900388.html

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值