建站
咨詢
售后
建站咨詢
新聞中心
這篇文章給大家分享的是有關(guān)vue如何解決跨域的內(nèi)容。小編覺(jué)得挺實(shí)用的，因此分享給大家做個(gè)參考，一起跟隨小編過(guò)來(lái)看看吧。
成都創(chuàng)新互聯(lián)致力于互聯(lián)網(wǎng)品牌建設(shè)與網(wǎng)絡(luò)營(yíng)銷，包括成都網(wǎng)站建設(shè)、成都做網(wǎng)站、SEO優(yōu)化、網(wǎng)絡(luò)推廣、整站優(yōu)化營(yíng)銷策劃推廣、電子商務(wù)、移動(dòng)互聯(lián)網(wǎng)營(yíng)銷等。成都創(chuàng)新互聯(lián)為不同類型的客戶提供良好的互聯(lián)網(wǎng)應(yīng)用定制及解決方案，成都創(chuàng)新互聯(lián)核心團(tuán)隊(duì)十多年專注互聯(lián)網(wǎng)開(kāi)發(fā)，積累了豐富的網(wǎng)站經(jīng)驗(yàn)，為廣大企業(yè)客戶提供一站式企業(yè)網(wǎng)站建設(shè)服務(wù)，在網(wǎng)站建設(shè)行業(yè)內(nèi)樹(shù)立了良好口碑。
vue項(xiàng)目中，前端與后臺(tái)進(jìn)行數(shù)據(jù)請(qǐng)求或者提交的時(shí)候，如果后臺(tái)沒(méi)有設(shè)置跨域，前端本地調(diào)試代碼的時(shí)候就會(huì)報(bào)“No 'Access-Control-Allow-Origin' header is present on the requested resource.” 這種跨域錯(cuò)誤。
要想本地正常的調(diào)試，解決的辦法有三個(gè)：
一、后臺(tái)更改header
header('Access-Control-Allow-Origin:*');//允許所有來(lái)源訪問(wèn)
header('Access-Control-Allow-Method:POST,GET');//允許訪問(wèn)的方式 這樣就可以跨域請(qǐng)求數(shù)據(jù)了。
二、使用JQuery提供的jsonp (注：vue中引入jquery，自行百度)
methods: {
getData () {
var self = this
$.ajax({
url: 'http://f.apiplus.cn/bj11x5.json',
type: 'GET',
dataType: 'JSONP',
success: function (res) {
self.data = res.data.slice(0, 3)
self.opencode = res.data[0].opencode.split(',')
}
})
}
}通過(guò)這種方法也可以解決跨域的問(wèn)題。
三、使用http-proxy-middleware 代理解決（項(xiàng)目使用vue-cli腳手架搭建）
例如請(qǐng)求的url:“http://f.apiplus.cn/bj11x5.json”
1、打開(kāi)config/index.js,在proxyTable中添寫(xiě)如下代碼：
proxyTable: {
'/api': { //使用"/api"來(lái)代替"http://f.apiplus.c"
target: 'http://f.apiplus.cn', //源地址
changeOrigin: true, //改變?cè)?nbsp;
pathRewrite: {
'^/api': 'http://f.apiplus.cn' //路徑重寫(xiě)
}
}
}2、使用axios請(qǐng)求數(shù)據(jù)時(shí)直接使用“/api”：
getData () {
axios.get('/api/bj11x5.json', function (res) {
console.log(res)
})通過(guò)這中方法去解決跨域，打包部署時(shí)還按這種方法會(huì)出問(wèn)題。解決方法如下：
let serverUrl = '/api/' //本地調(diào)試時(shí)
// let serverUrl = 'http://f.apiplus.cn/' //打包部署上線時(shí)
export default {
dataUrl: serverUrl + 'bj11x5.json'
}感謝各位的閱讀！關(guān)于“vue如何解決跨域”這篇文章就分享到這里了，希望以上內(nèi)容可以對(duì)大家有一定的幫助，讓大家可以學(xué)到更多知識(shí)，如果覺(jué)得文章不錯(cuò)，可以把它分享出去讓更多的人看到吧！
名稱欄目：vue如何解決跨域
標(biāo)題路徑：http://www.ef60e0e.cn/article/ispeoi.html
