vue跨域解決方法
vue項(xiàng)目中，前端與后臺(tái)進(jìn)行數(shù)據(jù)請(qǐng)求或者提交的時(shí)候，如果后臺(tá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:*');//允許所有來源訪問
header('Access-Control-Allow-Method:POST,GET');//允許訪問的方式
這樣就可以跨域請(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(',')
}
})
}
}
通過這種方法也可以解決跨域的問題。
三、使用http-proxy-middleware 代理解決（項(xiàng)目使用vue-cli腳手架搭建）
例如請(qǐng)求的url:“http://f.apiplus.cn/bj11x5.json”
1、打開config/index.js,在proxyTable中添寫如下代碼：
proxyTable: {
'/api': { //使用"/api"來代替"http://f.apiplus.c"
target: 'http://f.apiplus.cn', //源地址
changeOrigin: true, //改變?cè)?
pathRewrite: {
'^/api': 'http://f.apiplus.cn' //路徑重寫
}
}
}
2、使用axios請(qǐng)求數(shù)據(jù)時(shí)直接使用“/api”：
getData () {
axios.get('/api/bj11x5.json', function (res) {
console.log(res)
})
通過這中方法去解決跨域，打包部署時(shí)還按這種方法會(huì)出問題。解決方法如下：
let serverUrl = '/api/' //本地調(diào)試時(shí)
// let serverUrl = 'http://f.apiplus.cn/' //打包部署上線時(shí)
export default {
dataUrl: serverUrl + 'bj11x5.json'
}
總結(jié)
以上所述是小編給大家介紹的vue跨域解決方法 ，希望對(duì)大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會(huì)及時(shí)回復(fù)大家的！
相關(guān)文章
解決vue3?defineProps?引入定義的接口報(bào)錯(cuò)
這篇文章主要為大家介紹了解決vue3?defineProps?引入定義的接口報(bào)錯(cuò)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-05-05
本文介紹了VUE中組件的基本使用以及個(gè)人對(duì)VUE組件的理解,希望能幫助到大家2019-02-02
vue中關(guān)于router.beforeEach()的用法
這篇文章主要介紹了vue中關(guān)于router.beforeEach()的用法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-11-11
下面小編就為大家分享一篇解決vue+webpack打包路徑的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了vue項(xiàng)目部署到非根目錄下的問題及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue列表渲染的示例代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-11-11
本篇是我對(duì)vue使用過程中以及對(duì)一些社區(qū)朋友提問我的問題中做的一些總結(jié)，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-02-02
vue如何使用process.env搭建自定義運(yùn)行環(huán)境
這篇文章主要介紹了vue如何使用process.env搭建自定義運(yùn)行環(huán)境，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-01-01
本篇文章主要介紹了詳解基于vue-cli優(yōu)化的webpack配置，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-11-11
vue微信分享的實(shí)現(xiàn)(在當(dāng)前頁(yè)面分享其他頁(yè)面)
這篇文章主要介紹了vue微信分享，在當(dāng)前頁(yè)面分享其他頁(yè)面，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-04-04