vue跨域解決方法
更新時間：2017年10月15日 09:32:17 作者：王永存
這篇文章主要介紹了vue跨域解決方法 ,需要的朋友可以參考下
vue項(xiàng)目中，前端與后臺進(jìn)行數(shù)據(jù)請求或者提交的時候，如果后臺沒有設(shè)置跨域，前端本地調(diào)試代碼的時候就會報“No 'Access-Control-Allow-Origin' header is present on the requested resource.” 這種跨域錯誤。
要想本地正常的調(diào)試，解決的辦法有三個：
一、后臺更改header
header('Access-Control-Allow-Origin:*');//允許所有來源訪問
header('Access-Control-Allow-Method:POST,GET');//允許訪問的方式
這樣就可以跨域請求數(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腳手架搭建）
例如請求的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, //改變源
pathRewrite: {
'^/api': 'http://f.apiplus.cn' //路徑重寫
}
}
}
2、使用axios請求數(shù)據(jù)時直接使用“/api”：
getData () {
axios.get('/api/bj11x5.json', function (res) {
console.log(res)
})
通過這中方法去解決跨域，打包部署時還按這種方法會出問題。解決方法如下：
let serverUrl = '/api/' //本地調(diào)試時
// let serverUrl = 'http://f.apiplus.cn/' //打包部署上線時
export default {
dataUrl: serverUrl + 'bj11x5.json'
}
總結(jié)
以上所述是小編給大家介紹的vue跨域解決方法 ，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復(fù)大家的！
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目啟動白屏問題的幾種解決辦法,Vue項(xiàng)目打包后出現(xiàn)白屏的可能原因有很多,文中通過圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
解決Vue的項(xiàng)目使用Element ui 走馬燈無法實(shí)現(xiàn)的問題
這篇文章主要介紹了解決Vue的項(xiàng)目使用Element ui 走馬燈無法實(shí)現(xiàn)的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡單瀑布流布局，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
Vuex是一個專為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理模式,它采用集中式存儲管理應(yīng)用的所有組件的狀態(tài),并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測的方式發(fā)生變化,下面這篇文章主要給大家介紹了關(guān)于如何通過一篇文章帶你吃透Vuex3的狀態(tài)管理,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了Vuex 注入 Vue 生命周期的過程，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
Vue-router是Vue的核心組件，主要是作為Vue的路由管理器，Vue-router默認(rèn)hash模式，通過引入Vue-router對象模塊時配置mode屬性可以啟用history模式，本文將通過代碼示例給大家詳細(xì)分析Vue路由History模式2023-06-06
這篇文章主要介紹了vue fetch中的.then()的正確使用方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
vue將后臺數(shù)據(jù)時間戳轉(zhuǎn)換成日期格式
這篇文章主要為大家詳細(xì)介紹了vue將后臺數(shù)據(jù)時間戳轉(zhuǎn)換成日期格式，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要介紹了在vscode中使用腳手架搭建vue項(xiàng)目的相關(guān)資料,包括創(chuàng)建Vue2和Vue3項(xiàng)目,并展示了如何自定義項(xiàng)目配置,如選擇特性、路由模式、CSS預(yù)處理器和工具配置,通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-12-12
這篇文章主要介紹了VUE組件的計算屬性詳解，使用計算機(jī)屬性還是methods取決于你是否需要緩存，當(dāng)遍歷大數(shù)組和做大量計算時，應(yīng)當(dāng)使用計算機(jī)屬性，除非你不希望得到緩存，下文來了解具體詳情2022-06-06