webpack+vue-cil中proxyTable處理跨域的方法
跨域
了解同源政策：所謂"同源"指的是"三個(gè)相同"。
- 協(xié)議相同
- 域名相同
- 端口相同
解決跨域
1.jsonp 缺點(diǎn)：只能get請求 ，需要修改B網(wǎng)站的代碼
2.cors 這個(gè)方案缺點(diǎn) 是 ie6 7 兼容不好（倒是不見得要兼容）。需要B網(wǎng)站在響應(yīng)中加頭
3.postMessage 缺點(diǎn)也是 ie6 7 兼容不好（倒是不見得要兼容）。需要修改B網(wǎng)站的代碼
4.iframe window.name 傳值得方式很巧妙，兼容性也很好。但是也是需要你能修改B網(wǎng)站代碼
5.服務(wù)端主動(dòng)請求B網(wǎng)站，兼容性好而且你客戶端的代碼還是原來的ajax，缺點(diǎn)是感覺不好。（服務(wù)器端是不存在跨域安全限制的）
6.類似5 用nginx把B網(wǎng)站的數(shù)據(jù)url反向代理。
node， express 解決跨域
加上請求頭：
app.all('*', (req, res, next)=>{
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "Content-Type,Content-Length, Authorization, Accept,X-Requested-With");
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.header("X-Powered-By",' 3.2.1')
if(req.method=="OPTIONS") res.send(200);/*讓options請求快速返回*/
else next();
});
重點(diǎn)說一下vue-cli處理跨域
- 前后端分離的項(xiàng)目，常常開發(fā)的時(shí)候，請求的接口地址存在跨域問題
- webpack 前后端分離開發(fā)接口調(diào)試解決方案，proxyTable解決方案
- 首先要在項(xiàng)目目錄中找到根目錄下config文件夾下的index.js文件。由于我們是在開發(fā)環(huán)境下使用，自然而然是要配置在dev里面：
port: 8080,
proxyTable: {
'/api': {
target: 'http://www.ainyi.com', // 目標(biāo)接口域名
changeOrigin: true, // 是否跨域
// secure: false, // 如果是https接口，需要配置這個(gè)參數(shù)
pathRewrite: {
'^/api': '' // 重寫接口，一般不更改
}
},
},
'/api' 為匹配項(xiàng)，target 為被請求的地址
以上代碼表示：只要是http://www.ainyi.com/api的接口，都將被本地8080端口的請求代理：
http://localhost:8080/api ===> http://www.ainyi.com/api
也就是說，想請求接口http://www.ainyi.com/api，就是通過http://localhost:8080/api代理訪問，就不會產(chǎn)生跨域。
這樣就不需要在axios配置axios.defaults.baseURL，所有接口都由本地代理了
GitHub：https://github.com/Krryxa
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript DSL 流暢接口(使用鏈?zhǔn)秸{(diào)用)實(shí)例
這篇文章主要介紹了JavaScript DSL 流暢接口(使用鏈?zhǔn)秸{(diào)用)實(shí)例,本文講解了DSL 流暢接口、DSL 表達(dá)式生成器等內(nèi)容,需要的朋友可以參考下2015-03-03
微信小程序?qū)崿F(xiàn)動(dòng)態(tài)設(shè)置頁面標(biāo)題的方法【附源碼下載】
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)動(dòng)態(tài)設(shè)置頁面標(biāo)題的方法,涉及微信小程序button組件事件綁定及頁面元素屬性動(dòng)態(tài)設(shè)置相關(guān)實(shí)現(xiàn)技巧,并附帶完整源碼供讀者下載參考,需要的朋友可以參考下2017-11-11
Webpack中l(wèi)oader打包各種文件的方法實(shí)例
這篇文章主要給大家介紹了關(guān)于Webpack中l(wèi)oader打包各種文件的相關(guān)資料，其中包括處理css文件、less文件、scss文件、url地址以及ES6高級語法的方法，需要的朋友可以參考下2019-09-09
SPA的興起，促使我們更加關(guān)注與內(nèi)存相關(guān)的JavaScript編碼實(shí)踐。如果應(yīng)用使用的內(nèi)存越來越多，就會嚴(yán)重影響性能，甚至導(dǎo)致瀏覽器的崩潰。下面就來看看JavaScript中常見的內(nèi)存泄漏以及如何避免內(nèi)存泄漏2022-05-05
JavaScript中使用webuploader實(shí)現(xiàn)上傳視頻功能(demo)
這篇文章主要介紹了webuploader實(shí)現(xiàn)上傳視頻功能,通過本文給大家介紹了上傳視頻和上傳圖片的區(qū)別講解，非常不錯(cuò)，具有參考借鑒價(jià)值，需要的朋友可以參考下2017-04-04
js如何準(zhǔn)確獲取當(dāng)前頁面url網(wǎng)址信息
這篇文章主要為大家介紹了js準(zhǔn)確獲取當(dāng)前頁面url網(wǎng)址信息的多種方法，包括正則法、split拆分法等，需要的朋友可以參考下2016-04-04
用慣了vue和react之后可能會慢慢淡忘掉原生的一些操作dom的幾種方式,有的時(shí)候確實(shí)需要我們通過原生的方式進(jìn)行操作,下面這篇文章主要給大家介紹了關(guān)于js修改元素樣式的九種方式,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了js生成隨機(jī)數(shù)的過程，如何生成[n,m]的隨機(jī)整數(shù)，感興趣的小伙伴們可以參考一下2015-11-11
HTML+CSS+JS實(shí)現(xiàn)抓娃娃機(jī)游戲
這篇文章主要介紹了如何利用HTML+CSS+JS制作抓娃娃機(jī)游戲，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-04-04
這次是更改后的代碼實(shí)現(xiàn)以下功能：去掉了“確定”，“取消”按鈕。變單擊為雙擊事件，用戶按ESC鍵，取消更改感興趣的朋友可以了解下2013-01-01