vue.js(vue-resource) ---jsonp跨域

時間 2019-11-10

標籤 vue.js vue resource jsonp 欄目 JavaScript 简体版

原文原文鏈接

以前的筆記說axios沒有辦法處理跨域問題，因此就引入了vue-resource。使用jsonp來解決跨域問題.javascript

vue-resource的基本用法:html

get(url, [options])
head(url, [options])
delete(url, [options])
jsonp(url, [options])
post(url, [body], [options])
put(url, [body], [options])
patch(url, [body], [options])vue

參考下載文檔地址:https://github.com/pagekit/vue-resource/blob/develop/docs/http.mdjava

跨域搜索360搜索案例:ios

代碼：
git

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/vue.js" ></script>
		<script type="text/javascript" src="js/vue-resource/vue-resource.js" ></script>
		<script type="text/javascript">
			window.onload = function(){
				new Vue({
					el:"#main",
					data:{},
					methods:{
						sendJSONP1:function(){
							//
							this.$http.jsonp("https://sug.so.360.cn/suggest",{
								params:{
									word:'a'
								}
							}).then(resp=>{
								console.log(resp.data.s);
							},response => {
    							console.log("發送失敗"+response.status+","+response.statusText);
  							});
						}
					}
				});
			}
			
		</script>
	</head>
	<body>
		<div id="main">
			<button type="button" @click="sendJSONP1">向360搜索發送請求</button>
		</div>
	</body>
</html>

注：this.$http 在引入vue-resource.js 以後，在你建立vue實例的時候就會有$http屬性來完成vue發送http請求的需求。具體的能夠參考AIP文檔。github

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。