輕鬆解決vuejs跨域

2022-03-10 03:12:42 字數 1518 閱讀 8577

vuejs跨域問題實戰

有時候,本地使用webpack開啟乙個node的dev埠,專案中使用vuejs去訪問別人家的api,比如豆瓣或者其他的api,不使用jsonp肯定就會報跨域的問題。

如何讓我們呼叫別人家的api就像是呼叫自己家的一樣呢?答案就是利用自己的後台去訪問這個api,然後**到自己的前端,但是這麼搞,豈不是很麻煩,有沒有簡單的傻瓜式外掛程式可以替我們做這個操作呢?我們用一下**的思路proxy來解決這個問題。

其實nodejs有乙個httpproxy的元件,正好webpack也支援,那麼我們看看如何使用httpproxy,自動的監聽vue想要get的某些**api的請求,自動利用後台去訪問api,拿到返回結果,返回給vue。

1.最近使用了http-proxy-middleware! 外掛程式之後,訪問別人家的api就像是自己家的一樣。

//node的index.js

//攔截一切/api的請求,後台**獲取資料,返回到前端

var proxytable = }};

object.keys(proxytable).foreach(function (context)

}})//vue

export default

},ready() ,

methods: ).then(response = >

},(response) = >)}},

components:

}

記得提前安裝模組:npm install -d http-proxy-middleware

2.或者使用jsonp

參考:

mounted: function() , ,

emulatejson: true

}).then(function(response) , function(response) );

}

// 不加跨域xhr會發起options請求

// post的時候會把json物件轉成formdata

4.nodejs 解除跨域限制:

res.header("access-control-allow-origin", "*");

res.header("access-control-allow-headers", "x-requested-with");

res.header("access-control-allow-methods","put,post,get,delete,options");

res.header("x-powered-by",' 3.2.1')

next();

});proxytable參考:

落雨http:js-dev.cn

輕鬆解決vuejs跨域

vuejs跨域問題實戰 有時候,本地使用webpack開啟乙個node的dev埠,專案中使用vuejs去訪問別人家的api,比如豆瓣或者其他的api,不使用jsonp肯定就會報跨域的問題。如何讓我們呼叫別人家的api就像是呼叫自己家的一樣呢?答案就是利用自己的後台去訪問這個api,然後 到自己的前端...

跨域php,php怎麼解決跨域

php解決跨域問題 在做專案的過程中經常需要跨域訪問。這裡主要介紹一下 php 中怎麼解決跨域問題。1 允許所有網域名稱訪問header access control allow origin 2 允許單個網域名稱訪問header access control allow origin 3 允許多個...

跨域 springboot 解決前後端跨域

cors協議 h5中的新特性 cross origin resource sharing 跨域資源共享 通過它,我們的開發者 主要指後端開發者 可以決定資源是否能被跨域訪問。cors是乙個w3c標準,它允許瀏覽器 目前ie8以下還不能被支援 像我們不同源的伺服器發出xmlhttprequest請求,...