vue代理模式解決跨域詳解
更新時間：2022年09月14日 08:24:32 作者：曦12
這篇文章主要介紹了vue代理模式解決跨域詳解的相關(guān)資料,需要的朋友可以參考下
跨域是什么
簡單的講就是你在一個地方使用另一個地方的資源，被瀏覽器給擋下來了，不讓不用！當(dāng)然，它擋下來是有自己理由的：為了安全(╬▔皿▔)╯。
解決跨域
我是用vue開發(fā)的，就vue代理模式解決跨域說明一下。
1、在vue.config.js中這樣寫：
let devProxy = {
? //獲取ip信息
? '/getIpMsg': {
? ? target: "https://whois.pconline.com.cn/ipJson.jsp",//真實地址
? ? ws: true,
? ? changeOrigin: true,
? ? pathRewrite: {
? ? ? '/getIpMsg': ''
? ? },
? },
};
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
? transpileDependencies: true,
? publicPath: process.env.NODE_ENV === "production" ? "./" : "/",
? devServer: {
? ? port: 8080,//端口
? ? open: false,//項目啟動后是否在瀏覽器自動打開
? ? proxy: devProxy//代理服務(wù)器
? },
})
?target就是自己需要代理的真實地址getIpMsg你是可以自定義的。
2、創(chuàng)建一個http.ts（我是ts的，你也可以js）:
import axios from "axios";
//創(chuàng)建請求
function createServe(config: any) {
? ? let serve = axios.create({
? ? ? ? timeout: 5000 //超時
? ? });
? ? //請求攔截器
? ? serve.interceptors.request.use(
? ? ? ? config => {
? ? ? ? ? ? return config;
? ? ? ? },
? ? ? ? error => {
? ? ? ? ? ? return Promise.reject(error)
? ? ? ? }
? ? )
? ? //響應(yīng)攔截器
? ? serve.interceptors.response.use(
? ? ? ? response => {
? ? ? ? ? ? return response;
? ? ? ? },
? ? ? ? error => {
? ? ? ? ? ? return Promise.reject(error)
? ? ? ? }
? ? )
? ? return serve(config);
}
?
export default createServe;3、創(chuàng)建一個request.ts:
import createServe from "./http"
?
//獲取ip信息
export function getIpMsg(params = {}) {
? ? return createServe({
? ? ? ? method: "GET",
? ? ? ? url: '/getIpMsg',
? ? ? ? params
? ? })
}4、這樣使用：
import { getIpMsg } from "@/api/request";
?
function test(){
?? ?getIpMsg()
?? ?.then(res => {
?? ??? ?console.log(res);
?? ?})
}到此這篇關(guān)于vue代理模式解決跨域詳解的文章就介紹到這了,更多相關(guān)vue代理模式解決跨域內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vite+vue3項目集成ESLint與prettier的過程詳解
這篇文章主要介紹了vite+vue3項目中集成ESLint與prettier的相關(guān)知識，本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-09-09
vue實現(xiàn)在線學(xué)生錄入系統(tǒng)
這篇文章主要為大家詳細介紹了vue實現(xiàn)在線學(xué)生錄入系統(tǒng)，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-05-05
本文詳細介紹了在Vue框架中使用el-tree組件創(chuàng)建橫向滾動條的方法,通過代碼示例和步驟說明,幫助開發(fā)者理解和實現(xiàn)橫向滾動功能,感興趣的可以了解一下2024-09-09
本篇文章主要介紹了詳解webpack打包vue時提取css，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
前端在el-dialog中嵌套多個el-dialog代碼實現(xiàn)
最近使用vue+elementUI做項目,使用過程中很多地方會用到dialog這個組件,有好幾個地方用到了dialog的嵌套,下面這篇文章主要給大家介紹了關(guān)于前端在el-dialog中嵌套多個el-dialog代碼實現(xiàn)的相關(guān)資料,需要的朋友可以參考下2024-01-01
Vue中請求本地JSON文件并返回數(shù)據(jù)的方法實例
在前端開發(fā)過程當(dāng)中,當(dāng)后臺服務(wù)器開發(fā)數(shù)據(jù)還沒完善,沒法與咱們交接時,咱們習(xí)慣在本地寫上一個json文件做模擬數(shù)據(jù)測試代碼效果是否有問題,下面這篇文章主要給大家介紹了關(guān)于Vue中請求本地JSON文件并返回數(shù)據(jù)的相關(guān)資料,需要的朋友可以參考下2022-08-08
如何解決sass-loader和node-sass版本沖突的問題
這篇文章主要介紹了如何解決sass-loader和node-sass版本沖突的問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要介紹了Vue如何根據(jù)角色獲取菜單動態(tài)添加路由,本文通過實例代碼給大家介紹的非常詳細,對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2024-01-01
這篇文章主要給大家介紹了關(guān)于如何一步步基于element-ui封裝查詢組件的相關(guān)資料,本文通過示例代碼介紹的非常詳細,對大家學(xué)習(xí)或者使用vue.js具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2021-10-10
這篇文章主要介紹了VUE3+TS獲取組件類型的方法踩坑及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03