標籤：發送請求 cell 帶來 nts 應該 not jquery 好處 panel
https://cnodejs.org/topic/5930430f03dba3510d8a62c6
在使用axios發送請求時，伺服器端設定 res.header(“Access-Control-Allow-Origin”, “*”);可以正確得到結果
當伺服器端不設定允許跨域時，使用jsonp方式發送就不行了，提示錯誤如下
XMLHttpRequest cannot load http://localhost:3000/axios?cb=cb. No ‘Access-Control-Allow-Origin‘ header is present on the requested resource. Origin ‘null‘ is therefore not allowed access.那個小夥伴在Vue中使用axios發送跨域請求，請賜教！
12 回複cctv1005s 1樓?2 個月前把你的請求部分的代碼放出來看看
來自酷炫的 CNodeMD
justbecoder 2樓?2 個月前 作者// 繼承Vue.prototype.$http = axios;// 執行個體化var vm = new Vue({ el : ‘#box‘, data : { }, created:function(){// console.log(111);this.hello(); }, methods : {hello : function(){ this.$http.get(‘http://localhost:3000/axios?cb=cb‘,{ // withCredentials:true }).then(function(data,msg){ console.log(data); console.log(msg); }).catch(function(err){ console.log(err); })} }})@cctv1005s 你看下代碼
178220709 4樓?2 個月前解決問題的思路就有問題, jsonp關vue什麼事? 找axios去: https://github.com/mzabriskie/axios/blob/master/COOKBOOK.md#jsonp 最後說幾點: 1.jsonp一樣需要服務端支援,為什麼不用cors呢? 2.不建議將ajax和vue綁定在一起, 3.我是用swagger代碼產生模板將所有ajax封裝了一層promise,屏蔽掉ajax調用過程,只有promise(介面)才是穩定的,依賴於抽象而不是實現.
justbecoder 5樓?2 個月前 作者@178220709 你說的這個jsonp模組我已經實現了，感覺他和axios就沒有什麼關係了
justbecoder 6樓?2 個月前 作者@178220709 在vue 2.0中官方不是也推薦使用axios進行資料請求嗎
178220709 7樓?2 個月前@justbecoder vue官方推薦axios是因為它是一個優良的ajax庫,而不是說它就應該和vue綁定在一起,vue-resource的一些奇怪的約定事實上沒有帶來任何好處, vue和axios沒有任何關聯性和排斥性,應該盡量保持職責分離,
178220709 8樓?2 個月前@justbecoder axios不支援jsonp,這是官方的明確表態,如果非要用jsonp,那就不要用它.
而且想一想,如果你們後期需要將jsonp升級成cors,那是不是要到處改代碼, 但如果你封裝成promise後,則可以一次性統一替換promise裡面的具體實現,
這就是為什麼軟體開發應該依賴抽象而不是具體
搞後端的,這應該是入門級思想,但在前端,這方面很多人都認知不足.
AfterThreeYears 9樓?2 個月前不一樣吧 來自 牛讀
chanywn 10樓?2 個月前跨域資源共用（CORS）
https://blog.codefun.cn/blog/access-control-allow-origin
http://www.ruanyifeng.com/blog/2016/04/cors.html
cctv1005s 11樓?2 個月前JSONP本質上是為瀏覽器添加一個script標籤，因為script裡面的src可以不考慮跨域的問題。 因為axios是不支援jsonp的，所以如果你在不使用jquery的ajax的情況下，你是可以考慮自己封裝一個的，也不麻煩，就像這樣。
<!DOCTYPE html><html><head> <title>測試</title> <meta charset="utf-8" /></head><body><script type="text/javascript"> //百度suggets api var s = "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su?wd=132&json=1"; var fetchJsonp = function(url){ var body = document.getElementsByTagName(‘body‘)[0]; //插入一個script var script = document.createElement(‘script‘); script.setAttribute(‘src‘,url); body.appendChild(script); } //為了符合百度查詢api而建立的一個對象 window.baidu = {}; //script載入完之後會調用這個函數，sug就是suggest的內容 window.baidu.sug = function(sug){ console.log(sug); } //調用 fetchJsonp(s);</script></body></html>這個是我調用百度的suggest的介面實現的，非常簡單。
justbecoder 12樓?2 個月前 作者@cctv1005s 3Q
Vue中如何使用axios發送jsonp跨域驗證
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
