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:///v1/restserver/ting?method=baidu.ting.search.catalogSug&query=%E6%88%91%E7%9A%84%E4%B8%AD%E5%9B%BD%E5%BF%83' from origin 'http://localhost:63342' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

上面错误，关键词：Access-Control-Allow-Origin

只要出现这个关键词，就是访问受限。出现同源策略的拦截问题。

1.2.5 ajax跨域(跨源)方案之CORS

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

​ 实现CORS主要依靠后端服务器中响应数据中设置响应头信息返回的。

django的视图

def post(request):​ response = new Response()​ response .set_header("Access-Control-Allow-Origin","*")​ return response;// 在响应行信息里面设置以下内容：Access-Control-Allow-Origin: ajax所在的域名地址Access-Control-Allow-Origin: www.oldboy.cn # 表示只允许www.oldboy.cn域名的客户端的ajax跨域访问// * 表示任意源，表示允许任意源下的客户端的ajax都可以访问当前服务端信息Access-Control-Allow-Origin: *

总结：

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实现数据交互与跨域问题，希望对大家有所帮助，如果大家有任何疑问欢迎给我留言，小编会及时回复大家的！