這個是在使用vue中的axios請求資料的時候報的跨域,本來這個只需要後台在nginx服務中配置請求頭資訊問題可以很輕鬆解決的,
add_header access-control-allow-origin *;
add_header access-control-allow-methods 'get,post';
add_header access-control-allow-headers 'dnt,x-mx-reqtoken,keep-alive,user-agent,x-requested-with,if-modified-since,cache-control,content-type,authorization';
但是其實前端也可以輕鬆解決的
我看到網上有的說配置沒用,接下裡分情況講解一下。
步驟一找到config下的index.js
dev: }},
}
步驟二建乙個用來封裝axios的proxy.js檔案(檔名隨意,檔案放哪都行,後面引入路勁正確即可)
import axios from "axios" //引入axios
const instance = axios.create(
});export default
};
步驟三在main.js(專案入口檔案) 加入配置
import instance_ from "./router/proxy" //引入剛剛建立的 proxy.js 檔案
vue.prototype.instance = instance_ // 通過在 原型 上定義axios例項 使其在每個vue例項中可用
步驟四開始呼叫介面
this.instance.getinfo(, //我這個介面是get請求並且需要傳入page引數 沒有就不傳
}).then(()=>).catch(()=>)
步驟五 重啟專案 (npm run dev )
以上就完成了乙個前端解決跨域請求的基本步驟
首先 vue-cli3 腳手架搭建完成後,專案目錄中沒有 vue.config.js 檔案,需要手動建立,然後加入如下配置
let proxyobj = {};
proxyobj['/']=
};module.exports = ,
}
其他步驟和上面vue2.0一致。
這樣vue中基本的跨域問題就可以解決,希望可以幫助到你
vueCli3以及vueCli4建立vue專案
1.首先解除安裝舊版本 npm npm uninstall vue cli g yarn yarn global remove vue cli2.更新node版本 需要8.9以上 3.安裝vue cli3 npm npm install g vue cli yarn yarn global add ...
同時安裝Vue CLI2和Vue CLI3的方法
如果你想體驗vue cli3的簡潔清爽,又偶爾需要使用vue cli2,那這篇帖子就是你需要的。配置方法改進於 同一臺電腦 實現 vue cli2和vue cli3同時並存 原方法使用了直接修改檔名的方式,不夠美觀,破壞式的,改進後為透傳呼叫。修改 2019 08 14 原方法使用了直接修改檔名的方...
vue cli 3學習要點
只整理了一下vue cli 3的基礎內容部分,其他的見官網 一 簡介vue3 1.它可以通過 vue create 快速建立乙個新專案的腳手架,或者直接通過 vue serve 構建新想法的原型,不需要vue2.0那樣用webpack來構建專案 2.在專案建立的過程中,你也會被提示選擇喜歡的包管理器...