4. 通过axios实现数据请求

4.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="js/vue.js"></script>
    <script src="js/axios.js"></script>
</head>
<body>
    <div id="app">
        <button @click="get_music">点击获取天气</button>
    </div>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{},
            methods:{
                get_music(){
                    axios.get("http://tingapi.ting.baidu.com/v1/restserver/ting?method=baidu.ting.search.catalogSug&query=我的中国心")
                        .then(response=>{
                            console.log(response);

                        }).catch(error=>{
                            console.log(error.response)
                    });
                }
            }
        })
    </script>
</body>
</html>

上面代码运行错误如下：

Access to XMLHttpRequest at 'http://tingapi.ting.baidu.com/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

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

为什么天气接口能够突破同源策略获取数据，而歌曲接口不能获取数据反而报错，

原因：天气接口的服务端那边允许我们客户端这边跨域获取数据，天气接口的服务端实现了CORS授权。

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

ajax跨域(跨源)方案：后端授权[CORS]，jsonp，服务端代理

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

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

django的视图

def post(request):

response = new HttpResponse()

response .set_header("Access-Control-Allow-Origin","http://localhost:63342")

return response;

// 在响应行信息里面设置以下内容：
Access-Control-Allow-Origin: ajax所在的域名地址

Access-Control-Allow-Origin: www.oldboy.cn  # 表示只允许www.oldboy.cn域名的客户端的ajax跨域访问

// * 表示任意源，表示允许任意源下的客户端的ajax都可以访问当前服务端信息
Access-Control-Allow-Origin: *

1556074087897

总结：

0. 同源策略：浏览器的一种保护用户数据的一种安全机制。
   浏览器会限制ajax不能跨源访问其他源的数据地址。
   同源：判断两个通信的地址之间，是否协议，域名[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. CORS，跨域资源共享，在服务端的响应行中设置：
      Access-Control-Allow-Origin: 允许访问的域名地址
   2. jsonp 利用跨域标签来解决
   3. 是否服务端代理
      思路：通过python来请求对应的服务器接口，获取到数据以后，

Vue通过axios实现数据请求

4. 通过axios实现数据请求

4.2.4 同源策略

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

猜你喜欢