蝙蝠岛资源网

vue中axios实现数据交互与跨域问题
网络编程 2024/12/29 佚名
2 0
蝙蝠岛资源网 Design By www.hbtsch.com

1. 通过axios实现数据请求

vue.js默认没有提供ajax功能的。

所以使用vue的时候，一般都会使用axios的插件来实现ajax与后端服务器的数据交互。

注意，axios本质上就是javascript的ajax封装，所以会被同源策略限制。

下载地址：

https://unpkg.com/axios@0.18.0/dist/axios.js
https://unpkg.com/axios@0.18.0/dist/axios.min.js

axios提供发送请求的常用方法有两个：axios.get() 和 axios.post() 。

增 post

删 delete

改 put

查 get

 // 发送get请求
 // 参数1: 必填，字符串，请求的数据接口的url地址，例如请求地址：http://www.baidu.com"请求成功");
   console.log(response);
 }).catch(function (error) { // 请求失败以后的回调函数
   console.log("请求失败");
   console.log(error.response);
 });
 // 发送post请求，参数和使用和axios.get()一样。
 // 参数1: 必填，字符串，请求的数据接口的url地址
 // 参数2：必填，json对象，要提供给数据接口的参数,如果没有参数，则必须使用{}
 // 参数3：可选，json对象，请求头信息
 axios.post('服务器的资源地址',{
  username: 'xiaoming',
  password: '123456'
 },{
  responseData:"json",
 })
 .then(function (response) { // 请求成功以后的回调函数
  console.log(response);
 })
 .catch(function (error) { // 请求失败以后的回调函数
  console.log(error);
 });
 // b'firstName=Fred&lastName=Flintstone'

1.1 json

json是 JavaScript Object Notation 的首字母缩写，单词的意思是javascript对象表示法，这里说的json指的是类似于javascript对象的一种数据格式。

json的作用：在不同的系统平台，或不同编程语言之间传递数据。

1.1.1 json数据的语法

json数据对象类似于JavaScript中的对象，但是它的键对应的值里面是没有函数方法的，值可以是普通变量，不支持undefined，值还可以是数组或者json对象。

// json数据的对象格式：
{
 "name":"tom",
 "age":18
}
// json数据的数组格式：
["tom",18,"programmer"]

复杂的json格式数据可以包含对象和数组的写法。

{
 "name":"小明",
 "age":200,
 "fav":["code","eat","swim","read"],
 "son":{
 "name":"小小明",
 "age":100,
 "lve":["code","eat"],
 }
}

// 数组结构也可以作为json传输数据。

json数据可以保存在.json文件中，一般里面就只有一个json对象。

总结：

1. json文件的后缀是.json
2. json文件一般保存一个单一的json数据
3. json数据的属性不能是方法或者undefined，属性值只能：数值、字符串、json和数组
4. json数据只使用双引号、每一个属性成员之间使用逗号隔开，并且最后一个成员没有逗号。   

 {
  "name":"小明",
  "age":200,
  "fav":["code","eat","swim","read"],
  "son":{
  "name":"小小明",
  "age":100
  }
 }

工具：postman可以用于测试开发的数据接口。

1.1.2 js中提供的json数据转换方法

javascript提供了一个JSON对象来操作json数据的数据转换.

方法 参数 返回值 描述 stringify json对象 字符串 json对象转成字符串 parse 字符串 json对象 字符串格式的json数据转成json对象 

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
</head>
<body>
<script>
 // json语法
 let humen = {
  "username":"xiaohui",
  "password":"1234567",
  "age":20
 };
 console.log(humen);
 console.log(typeof humen);
 // JSON对象提供对json格式数据的转换功能
 // stringify(json对象) # 用于把json转换成字符串
 let result = JSON.stringify(humen);
 console.log(result);
 console.log(typeof result);
 // parse(字符串类型的json数据) # 用于把字符串转成json对象
 let json_str = '{"password":"1123","age":20,"name":"xiaobai"}';
 console.log(json_str)
 console.log(typeof json_str)
 let json_obj = JSON.parse(json_str);
 console.log(json_obj);
 console.log(typeof json_obj)
 console.log(json_obj.age)
</script>
</body>
</html>

1.2 ajax

ajax，一般中文称之为："阿贾克斯"，是英文 “Async Javascript And Xml”的简写，译作：异步js和xml数据传输数据。

ajax的作用： ajax可以让js代替浏览器向后端程序发送http请求，与后端通信，在用户不知道的情况下操作数据和信息，从而实现页面局部刷新数据/无刷新更新数据。

所以开发中ajax是很常用的技术，主要用于操作后端提供的数据接口，从而实现网站的前后端分离。

ajax技术的原理是实例化js的XMLHttpRequest对象，使用此对象提供的内置方法就可以与后端进行数据通信。

1.2.1 数据接口

数据接口，也叫api接口，表示后端提供操作数据/功能的url地址给客户端使用。

客户端通过发起请求向服务端提供的url地址申请操作数据【操作一般：增删查改】

同时在工作中，大部分数据接口都不是手写，而是通过函数库/框架来生成。

1.2.3 ajax的使用

ajax的使用必须与服务端程序配合使用，但是目前我们先学习ajax的使用，所以暂时先不涉及到服务端python代码的编写。因此，我们可以使用别人写好的数据接口进行调用。

jQuery将ajax封装成了一个函数$.ajax()，我们可以直接用这个函数来执行ajax请求。

接口 地址 天气接口 http://wthrcdn.etouch.cn/weather_mini"htmlcode"> 

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="/UploadFiles/2021-04-02/jquery-1.12.4.js">


vue版本：





<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="/UploadFiles/2021-04-02/vue.js">


总结：


1. 发送ajax请求，要通过$.ajax()，参数是对象，里面有固定的参数名称。







 $.ajax({
  "url":"数据接口url地址",
  "method":"http请求方式，前端只支持get和post",
  "dataType":"设置服务器返回的数据格式，常用的json，html，jsonp，默认值就是json",
  // 要发送给后端的数据参数，post时，数据必须写在data，get可以写在data,也可以跟在地址栏"data":{
  "数据名称":"数据值",
  }
 }).then(function(resp){ // ajax请求数据成功时会自动调用then方法的匿名函数
  console.log( resp ); // 服务端返回的数据
 }).fail(function(error){ // ajax请求数据失败时会自动调用fail方法的匿名函数
  console.log( error );
 });





2. ajax的使用往往配合事件/钩子操作进行调用。


jQuery还提供了$.get 和 $post简写$.ajax的操作。





// 发送get请求
// 参数1：数据接口的请求地址
// 参数2：发送给接口地址的数据参数
// 参数3：ajax请求成功以后，调用的匿名函数，匿名函数的第一个参数还是服务端返回的数据
// 参数4：设置服务端返回的数据格式，告诉给jQuery
$.get("test.php", { "func": "getNameAndTime" },
 function(data){
  alert(data.name); // John
  console.log(data.time); // 2pm
 }, "json");
// 发送post请求
// 参数1：数据接口的请求地址
// 参数2：发送给接口地址的数据参数
// 参数3：ajax请求成功以后，调用的匿名函数，匿名函数的第一个参数还是服务端返回的数据
// 参数4：设置服务端返回的数据格式，告诉给jQuery
$.post("test.php", { "func": "getNameAndTime" },
 function(data){
  alert(data.name); // John
  console.log(data.time); // 2pm
 }, "json");





1.2.4 同源策略


同源策略，是浏览器为了保护用户信息安全的一种安全机制。所谓的同源就是指代通信的两个地址（例如服务端接口地址与浏览器客户端页面地址）之间比较，是否协议、域名(IP)和端口相同。不同源的客户端脚本[javascript]在没有明确授权的情况下，没有权限读写对方信息。


ajax本质上还是javascript，是运行在浏览器中的脚本语言，所以会被受到浏览器的同源策略所限制。




  
    
      前端地址：http://www.oldboy.cn/index.html
      是否同源
      原因
    
  
  
    
      http://www.oldboy.cn/user/login.html
      是
      协议、域名、端口相同
    
    
      http://www.oldboy.cn/about.html
      是
      协议、域名、端口相同
    
    
      https://www.oldboy.cn/user/login.html
      否
      协议不同 ( https和http )
    
    
      http:/www.oldboy.cn:5000/user/login.html
      否
      端口 不同( 5000和80)
    
    
      http://bbs.oldboy.cn/user/login.html
      否
      域名不同 ( bbs和www )
    
  




同源策略针对ajax的拦截，代码：





<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>Title</title>
 <script src="/UploadFiles/2021-04-02/vue.js">


上面代码运行错误如下：




Access to XMLHttpRequest at 'http://tingapi.ting.baidu.com/v1/restserver/ting"跨域资源共享"，它允许浏览器向跨源的后端服务器发出ajax请求，从而克服了AJAX只能同源使用的限制。


"htmlcode">



def post(request):
"Access-Control-Allow-Origin","*")
"text-align: center">vue中axios实现数据交互与跨域问题


总结：




0. 同源策略：浏览器的一种保护用户数据的一种安全机制。

   浏览器会限制脚本语法不能跨源访问其他源的数据地址。

   同源：判断两个通信的地址之间，是否协议，域名[IP]，端口一致。   




   ajax：  http://127.0.0.1/index.html

   api数据接口：  http://localhost/index   




   这两个是同源么？不是同源的。是否同源的判断依据不会根据电脑来判断，而是通过协议、域名、端口的字符串是否来判断。  




1. ajax默认情况下会受到同源策略的影响，一旦受到影响会报错误如下：

     No 'Access-Control-Allow-Origin' header is present on the requested resource


2. 解决ajax只能同源访问数据接口的方式：




   1. 在服务端的响应行中设置：




      Access-Control-Allow-Origin: 允许访问的域名地址




   2. jsonp




   3. 是否服务端代理




      思路：通过python来请求对应的服务器接口，获取到数据以后，




总结


以上所述是小编给大家介绍的vue中axios实现数据交互与跨域问题，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！


                                

                                

                                     

                                

                                    标签：
                                        
vue,axios跨域,vue,axios,数据交互

                                     

                                
蝙蝠岛资源网 Design By www.hbtsch.com
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！ 如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
蝙蝠岛资源网 Design By www.hbtsch.com

评论“vue中axios实现数据交互与跨域问题”

暂无vue中axios实现数据交互与跨域问题的评论...
www.hbtsch.com 蝙蝠岛资源网
139,976影音资源
144,792福利资源
21,817软件资源
631,128技术资源

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。

《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒 经典版》的玩家都可以获得奖励。

更新日志

友情链接

杰晶网络 DDR爱好者之家 桃源资源网 杰网资源 富贵资源网 南强小屋 铁雪资源网 幽灵资源网 万梅资源网 狼山资源网 白云岛资源网 昆仑资源网 相思资源网 明霞山资源网 内蒙古资源网 黑松山资源网 茶园资源网 饿虎岗资源网 大旗谷资源网 常春岛资源网 岱庙资源网 兴国资源网 快活林资源网 蝙蝠岛资源网 帝王谷资源网 白云城资源网 伏龙阁资源网 清风细雨楼 天枫庄资源网 圆月山庄资源网 无争山庄资源网 神水资源网 移花宫资源网 神剑山庄资源网 无为清净楼资源网 金钱帮资源网 丐帮资源网 华山资源网 极乐门资源网 小李飞刀资源网 凤求凰客栈 风云阁资源网 金狮镖局 鸳鸯亭资源网 千金楼资源网 更多链接
蝙蝠岛资源网 Design By www.hbtsch.com