最近后台需求要在請求的時候傳cooki給后台,正常情況下拿到cookie后存在cookie里,同域名下是會自己帶到請求頭里的,但是因為要在本地調試,那么問題就來了,localhost:8080下面的cookie是不會帶到線上的請求頭里的,於是問題產生了,好了廢話不多說,看看我踩坑的過程吧,希望對大家有所幫助。
首先我在main.js里面加了這么一段代碼
這段代碼我網上搜了下 說是叫攔截器,意思就是你可以在所有的接口請求之前 可以先執行你的方法,比如說:我后返回401是沒有登錄,那么我就可以在next里面寫一個跳轉,在沒有登錄的時候 跳轉到登錄頁面。上面的request.credentials = true;這句代碼的解釋是 允許跨域攜帶cookie。這樣處理完了我去查看我的接口請求,結果發現 cookie是帶上了,但是又來了一個新的問題,那就是之前后台設置的允許所有跨域失效了(Access-Control-Allow-Origin:*)也就是所有的接口又產生了跨域請求。
2.解決新問題 跨域
在config文件新建一個 proxyConfig.js 配置內容如下:
module.exports = {
proxyList: {
'/': {
// 測試環境
target: 'http://bcwap.lanrentool.com', // 接口域名
changeOrigin: true, //是否跨域
pathRewrite: {
'^/': '' //需要rewrite重寫的,
}
}
}
}
然后在 config 下面的 index 里面加下面代碼
var proxyConfig = require('./proxyConfig')
在 dev 配置里面加入:proxyTable: proxyConfig.proxyList,//跨域設置
最后在main.js 加入這句代碼 Vue.http.options.xhr = { withCredentials: true }
這樣配置就已經完成了
在你請求接口時 只需要請求域名后面的部分就可以了例如: 'http://bcwap.lanrentool.com/v1/ad/get_Ad_ListAction?ad_type=sybn&source=wap',
請求時只需要:
this.$http.get(‘v1/ad/get_Ad_ListAction?ad_type=sybn&source=wap’).then(function(res) {
_this.topBannerList = res.body.data;
})
致此,問題已經解決了。
有什么寫錯的地方歡迎評論指出,願大家順利解決問題。
參考:https://segmentfault.com/a/1190000008910576