vue跨域解決方法
更新時間：2017年10月15日 09:32:17 作者：王永存
這篇文章主要介紹了vue跨域解決方法 ,需要的朋友可以參考下
vue項目中，前端與后臺進行數(shù)據(jù)請求或者提交的時候，如果后臺沒有設置跨域，前端本地調(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 代理解決（項目使用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跨域解決方法 ，希望對大家有所幫助，如果大家有任何疑問歡迎給我留言，小編會及時回復大家的！
相關文章
這篇文章主要給大家介紹了關于Vue項目啟動白屏問題的幾種解決辦法,Vue項目打包后出現(xiàn)白屏的可能原因有很多,文中通過圖文介紹的非常詳細,需要的朋友可以參考下2023-12-12
解決Vue的項目使用Element ui 走馬燈無法實現(xiàn)的問題
這篇文章主要介紹了解決Vue的項目使用Element ui 走馬燈無法實現(xiàn)的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08
這篇文章主要為大家詳細介紹了vue實現(xiàn)簡單瀑布流布局，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03
Vuex是一個專為Vue.js應用程序開發(fā)的狀態(tài)管理模式,它采用集中式存儲管理應用的所有組件的狀態(tài),并以相應的規(guī)則保證狀態(tài)以一種可預測的方式發(fā)生變化,下面這篇文章主要給大家介紹了關于如何通過一篇文章帶你吃透Vuex3的狀態(tài)管理,需要的朋友可以參考下2022-07-07
這篇文章主要介紹了Vuex 注入 Vue 生命周期的過程，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
Vue-router是Vue的核心組件，主要是作為Vue的路由管理器，Vue-router默認hash模式，通過引入Vue-router對象模塊時配置mode屬性可以啟用history模式，本文將通過代碼示例給大家詳細分析Vue路由History模式2023-06-06
這篇文章主要介紹了vue fetch中的.then()的正確使用方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2020-04-04
vue將后臺數(shù)據(jù)時間戳轉(zhuǎn)換成日期格式
這篇文章主要為大家詳細介紹了vue將后臺數(shù)據(jù)時間戳轉(zhuǎn)換成日期格式，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-07-07
這篇文章主要介紹了在vscode中使用腳手架搭建vue項目的相關資料,包括創(chuàng)建Vue2和Vue3項目,并展示了如何自定義項目配置,如選擇特性、路由模式、CSS預處理器和工具配置,通過代碼介紹的非常詳細,需要的朋友可以參考下2024-12-12
這篇文章主要介紹了VUE組件的計算屬性詳解，使用計算機屬性還是methods取決于你是否需要緩存，當遍歷大數(shù)組和做大量計算時，應當使用計算機屬性，除非你不希望得到緩存，下文來了解具體詳情2022-06-06