vue中的axios实现数据交互和跨域问题

时间：2021-08-24 来源：互联网编辑：宝哥软件园浏览：次

1.通过axios实现数据请求

Vue.js默认不提供ajax功能。

因此，在使用vue时，一般使用axios插件来实现ajax与后端服务器之间的数据交互。

请注意，axios本质上是javascript的ajax封装，因此会受到同源策略的限制。

下载地址：

https://UNP kg.com/[email protected]/dist/axios . js https://UNP kg.com/[email protected]/dist/axios . min . js

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

添加帖子

删除删除

更改为put

检查获取

//send get request//需要参数1:字符串，请求数据接口的url地址，例如，请求地址：http://www.baidu.com？Id=200 //参数2:可选，json对象，要提供给数据接口的参数//参数3:可选，json对象，请求头信息axios.get('服务器的资源地址'，{//http://www.baidu.com的params 3360 {参数名3360 '参数值'，//id: 200，} })。然后(函数(response) {//请求成功后回调函数console.log请求成功’)；console.log(响应)；}).catch(函数(错误){//请求失败后回调函数console.log('请求失败')；console . log(error . response)；});//使用与axios.get()相同的参数和用法发送post请求。//参数1:是必需的，字符串，请求的数据接口的url地址。//参数2:必选，json对象，要提供给数据接口的参数。如果没有参数，{ }//参数3:可选，json对象，请求头信息axios . post({服务器的资源地址'，{username: 'xiaoming ')必须使用Password:' 123456'}，{responsedata :' JSON '，})。然后(function(response){//回调函数console.log(response)请求成功后；}) .请求失败后的catch(函数(错误){//回调函数console.log(错误);});//b ' first NAmE=FredLastNAmE=Flinterstone ' 1.1 JSON

Json是JavaScript Object notification的缩写，这个词的意思是JavaScript Object notification。json在这里指的是一种类似于JavaScript对象的数据格式。

json的功能是在不同的系统平台或不同的编程语言之间传输数据。

1 . 1 . 1 JSON数据语法

Json数据对象类似于JavaScript中的对象，但是在其键对应的值中没有函数方法。这些值可以是普通变量，不支持undefined。这些值也可以是数组或json对象。

//json数据的对象格式：{'name' :' Tom '，' age ' :18 }//JSON数据的数组格式：['tom '，18，'编程器']复杂的JSON格式数据可以包含对象和数组的编写。

{ '姓名' : '小明'，'年龄' :200，' fav' : ['代码'，'吃饭'，'游泳'，'阅读'，' json' : { '姓名' : '小明'，'

Json数据可以保存在. json文件中，该文件通常只包含一个json对象。

总结：

1.json文件的后缀是. js 21 . json文件一般保存单个JSON数据。3.JSON数据的属性不能是方法或未定义，属性值只能是数值、字符串、JSON和数组。4 3.json数据只使用双引号，每个属性成员用逗号分隔，最后一个成员没有逗号。

{ '姓名' : '小明'，'年龄' :200，' fav' : ['代码'，'吃饭'，'游泳'，'读书'，'儿子' : { '姓名' : '小明'，'

1 . 1 . 2 JS中提供的json数据转换方法

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

方法参数返回值描述stringify json对象字符串json对象转换为字符串解析字符串json对象字符串格式的json数据转换为json对象！doctype html lang=' en ' head meta charset=' utf-8 ' title/title/head dyscript//JSON语法让humen={'username' :' xiaohui '，' password' :' 1234567 '，' age ' :20 }；console.log(虎门)；console.log(虎门类型)；//json对象提供json格式数据的转换功能。//stringify(json对象)#用于将json转换为字符串let result=JSON . stringify(humen)；console.log(结果)；console.log(结果类型)；//parse(字符串类型的json数据)#用于将字符串转换为json对象让JSON _ str=' { ' password ' : ' 1123 '，' age' :20，' name' 3360 '小白' } '；console . log(JSON _ str)console . log(type of JSON _ str)让JSON _ obj=JSON . parse(JSON _ str)；console . log(JSON _ obj)；console.log(json_obj的类型)console . log(JSON _ obj . age)/script/body/html 1.2 Ajax

Ajax，中文俗称Ajax，英文是“Async Javascript和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?市=城市名称音乐界面搜索http://tingapi.ting.baidu.com/v1/restserver/ting?方法=BaidU . ting . search . catalogsugquery=歌曲标题音乐信息界面http://tingapi.ting.baidu.com/v1/restserver/ting?方法=BaIDu.ting.song.playsongid=音乐id。编写代码以获取接口提供的数据：

JQ版本

！DOCTYPE html html lang=' en ' head meta charset=' UTF-8 ' title title/title script src=' http : js/jquery-1 . 12 . 4 . js '/script script $(function(){ $(' # BTN ')。on ('click '，function () {$。Ajax({//后端程序url地址：URL :‘http://wthrcdn.etouch.cn/weather _ mini’，//也可以使用方法，默认为‘GET’。常用的有' post' type:' get '，datatype:' JSON '，//返回的数据格式，常用的有' JSON '，' html '，' jsonp ' data 3360 {//设置发送到服务器的数据，如果是get请求，也可以写入url地址。以下'城市' : '北京' } })。请求成功后完成(function(resp){//operation console . log(resp );}) .请求失败后失败(函数(错误){//操作控制台. log(错误);});});})/script/headsdybutton id=' BTN '点击获取数据/按钮/正文/htmlvue版本：

！DOCTYPE html html lang=' en ' Head meta charset=' UTF-8 ' title title/title script src=' http : js/vue . js '/script script src=' http : js/axios . js '/script/Head body div id=' app '输入类型=' text ' v-model=' City ' button @ click=' get _ weather ' click获取天气/button/div script let VM=new vue({ El : ' # 1)城市=' this.city)。然后(响应={ console.log(响应)；}).catch(错误={ console . log(error . response)})；} } })/脚本/正文/html摘要：

1.要发送ajax请求，您应该传递$。ajax()，参数是具有固定参数名称的对象。

$.ajax({ 'url': '数据接口url地址'，' method':'http请求模式，前端只支持get和post '，' dataType': '设置服务器返回的数据格式，常用json，html和jsonp，默认值为JSON '。//要发送到后端的数据参数。在' data ' : { ' data name ' : ' data value '，}}之后)。然后(function(resp){//当Ajax请求数据成功时，会自动调用then方法的匿名函数console . log(resp)；//服务器返回的数据})。fail(函数(错误){//当Ajax请求数据失败时，会自动调用fail方法的匿名函数console.log(错误)；});2.ajax通常通过事件/钩子操作来调用。

JQuery还提供了$的操作。get和$post缩写$.ajax。

//发送获取请求//参数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/log in . html没有不同的端口(5000和80)http://bbs.oldboy.cn/User/log in . html无论域名不同(bbs和www)，相同的源码策略都是针对拦截ajax，代码：

！DOCTYPE html html lang=' en ' Head meta charset=' UTF-8 ' title title/title script src=' http : js/vue . js '/script script src=' http : js/axios . js '/script/Head body div id=' app ' button @ click=' get _ music ' click获取天气/按钮/div script let VM=new vue({ El : ' # app }，data: {}，methods:method=Baidu . ting . search . catalogsugquery=我的中国心')。然后(响应={console.log(响应)；}).catch(错误={ console . log(error . response)})；} } } })/script/body/html/html上面的代码运行不正确，如下所示：

在' http://tingpi . ting . Baidu.com/v1/rest server/ting访问XMLHttpRequest？方法=Baidu . ting . search . catalogsugquery=my Chinese heart ' from origin ' http://localhost :63342 '已被cors策略：阻止请求的资源上不存在' access-control-allow-or origin '标头。

以上错误，关键词：访问控制允许来源

只要这个关键字出现，访问就受到限制。发生同源策略的拦截问题。

1 . 2 . 5 Ajax跨域(跨源)方案的CORS

CORS是W3C标准，全称是‘跨域资源共享’。它允许浏览器向跨源后端服务器发送ajax请求，从而克服了AJAX只能在同一个源中使用的限制。

CORS的实现主要依赖于后端服务器中响应数据中设置的响应头信息。

姜戈的观点

def post(请求):响应=new Response()响应。set _ header(' Access-Control-Allow-Origin '，' * '返回响应；//在响应行信息中设置如下内容：access-control-allow-origin : access-control-allow-origin 3360 access-control-allow-origin 3360 awww . oldboy . cn #表示只允许www.oldboy.cn域名的客户端进行ajax跨域访问。//*表示任意来源，这意味着任意来源下客户端的ajax都可以访问当前服务器信息Access-control-allow-origin : *