Ajax跨域请求与解决方案
发布日期:2021-11-02 02:26:41 浏览次数:0 分类:技术文章

同域与跨域请求

  • 同域请求:

    网络协议, 域名,端口号都一致,则为同域(同源)请求

    :8090/index.html

  • 跨域请求:

    浏览器对于javascript的同源策略的限制,网络协议, 域名,端口号只要有一个不同,则视为跨域请求

  • ajax的同源策略

    ajax请求的url地址,必须与浏览器上的url地址处于同域上,也就是域名,端口,协议相同.不能是其他域的资源,这是在设计ajax时基于安全的考虑

jsonp(了解)

ajax只能请求同一个域下的数据或资源,有时候需要跨域请求数据,就需要用到jsonp技术,jsonp可以跨域请求数据,它的原理主要是利用了<script>标签可以跨域链接资源的特性,一种非官方跨域数据交互协议。
一个是描述信息的格式,一个是信息传递双方约定的方法。

jsonp的产生:

  • 1.AJAX直接请求普通文件存在跨域无权限访问的问题,不管是静态页面也好.

  • 2.不过我们在调用js文件的时候又不受跨域影响,比如引入jquery框架的,或者是调用相片的时候

  • 3.凡是拥有scr这个属性的标签都可以跨域例如<script><img><iframe>

  • 4.如果想通过纯web端跨域访问数据只有一种可能,那就是把远程服务器上的数据装进js格式的文件里.

  • 5.而json又是一个轻量级的数据格式,还被js原生支持

  • 6.为了便于客户端使用数据,逐渐形成了一种非正式传输协议,人们把它称作JSONP,该协议的一个要点就是允许用户传递一个callback 参数给服务端,

跨域请求360索引的数据

 <script>     $(function () {
             // 输入框绑定按键抬起事件         $('input').keyup(function () {
                 // 取得按键抬起时用户输入的数据                          var vals=$(this).val()             // 清空列表             $('ul').empty()                          $.ajax({
                     // 跨域请求                 url: 'https://sug.so.360.cn/suggest',                 type: 'get',                  dataType: 'jsonp',  // 使用jsonp实现跨域                 data:{
    'word':vals,'encodein':'utf-8','encodeout':'utf-8'}             })             .done(function (dat) {
                     console.log(dat)                 //dat:  {q: "c", p: true, s: Array(10)} 迭代数组                  //迭代数组 s为数据列表                 for(var i=0;i<dat.s.length;i++){
                         // 准备一个节点                     $li=$('<li>'+dat.s[i]+'</li>')                     // 向ul的子级尾部添加节点                     $('ul').append($li)                 }             })         })     }) </script><!-- html部分 --><input type="text"><ul></ul>
上一篇:Vue基础部分笔记
下一篇:ajax请求方式

关于作者

    白红宇是个全栈工程师,前端vue,小程序,app开发到后端框架设计,数据库设计,环境部署上线运维。

最新文章

revit输入序列号闪退_BIM软件小技巧:关于REVIT启动闪退的解决方法 2021-10-31
濮阳第二届创客机器人比赛_小创客 未来梦 我市举行第二届青少年机器人竞赛... 2021-10-31
swagger 导出离线文档_项目工具三:Swagger导出离线版HTML5和PDF格式api文档 2021-10-31
gateway 内存溢出问题_开发中内存溢出问题及解决 2021-10-31
visualmap折线图_echarts折线区域图 2021-10-31
array用法 numpy_numpy学习笔记 - numpy数组的常见用法 2021-10-31
es 开启集群_elasticsearch集群启动有问题可以考虑把es的进程杀掉 2021-10-31
vue项目的停止_javascript – 停止多次点击vue.js 2021-10-31
1 数列分块入门_「分块系列」数列分块入门1 解题报告 2021-10-31
sparkcore分区_7.spark core之数据分区 2021-10-31
1字符集 iso latin_附件一、ISO Latin-1字符集 2021-10-31
jenkins远程构建job_jenkins:一个jenkins项目远程触发另一个jenkins项目构建配置 2021-10-31
idea 检测 重复代码_重复代码检测 2021-10-31
和csm_CSM等厚水泥土搅拌墙施工案例 2021-10-31
滑动平均_山东空气质量恶化了?院士反驳:多年滑动平均值看一直在改善(澎湃新闻)... 2021-10-31
滑轮位置_初中物理滑轮组图像压轴题 2021-10-31
将输入流转换为二进制_如何将基本磁盘转换为动态磁盘 2021-10-31
mysql的sql生成一个唯一值作为一列_Excel中多条件查找唯一值的方法你了解几种?... 2021-10-31
javaeejsp文件放哪_Linux的文件系统详解 2021-10-31
华为硬件笔试 通用器件知识2_秋招“笔试经”第八弹:大华嵌入式岗 2021-10-31