1. 程式人生 > >vue-resource與axios和javascript請求資料以及同源策略的

vue-resource與axios和javascript請求資料以及同源策略的

vue-resource:

官方提供外掛:github

1、安裝 :cnpm install vue-resource --save

2、引入 :main.裡面引入import VueResource from 'vue-resource';

3、呼叫:Vue.use(VueResource);

4、使用(看著github上教程用即可)

axios

1、安裝 cnpm install axios --save

2、應用:哪裡用哪裡引用 

------------------------------------------------------------------------

1、--save把檔案寫入dependencies裡面,這樣打包的時候才不會報錯

2、如果是mac筆記本命令上面要加sudo

原生

1、new XMLHttpRequest()

2、xhr.open("get/post",hr,true);

      可以加請求頭xhr.setRequestHeader();看需要

3、xhr.send(); //如果是post請求,資料最好是xhr.send("username=admin&password=123456&verify=123456");這種方式拼接;如果是get,留白就行了

4、 xhr.onreadystatechange = function(){
          if(xhr.readystate == 4 && xhr.status ==200){
              console.log(xhr.responseText)
         }
      };

------------------------------------------------------------------------------------------------------------------------------

順便總結一下:同源策略

所謂同源,就是必須協議、域名、埠都一致的,才叫做同源。例如:http://www.12306.cn和https://www.12306.cn,由於協議不一致,就不是同源。

如果是非同源,就會出現跨域報錯,解決的辦法有2種:

a、服務端設定這個Access-Control-Allow-Origin的header就可以允許跨域訪問了response.setHeader("Access-Control-Allow-Origin", "*"); (是*,所有都可以訪問,存在安全隱患)

b、jsonp請求方式,伺服器端要處理一下json資料