vue代理模式解決跨域詳解
跨域是什么
簡(jiǎn)單的講就是你在一個(gè)地方使用另一個(gè)地方的資源,被瀏覽器給擋下來(lái)了,不讓不用!當(dāng)然,它擋下來(lái)是有自己理由的:為了安全(╬▔皿▔)╯。
解決跨域
我是用vue開發(fā)的,就vue代理模式解決跨域說(shuō)明一下。
1、在vue.config.js中這樣寫:
let devProxy = {
? //獲取ip信息
? '/getIpMsg': {
? ? target: "https://whois.pconline.com.cn/ipJson.jsp",//真實(shí)地址
? ? 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,//項(xiàng)目啟動(dòng)后是否在瀏覽器自動(dòng)打開
? ? proxy: devProxy//代理服務(wù)器
? },
})
?target就是自己需要代理的真實(shí)地址getIpMsg你是可以自定義的。
2、創(chuàng)建一個(gè)http.ts(我是ts的,你也可以js):
import axios from "axios";
//創(chuàng)建請(qǐng)求
function createServe(config: any) {
? ? let serve = axios.create({
? ? ? ? timeout: 5000 //超時(shí)
? ? });
? ? //請(qǐng)求攔截器
? ? 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)建一個(gè)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)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
VUE3+Element-plus中el-form的使用示例代碼
這篇文章主要介紹了VUE3+Element-plus中el-form的使用示例代碼,本文通過(guò)圖文示例代碼相結(jié)合給大家介紹的非常詳細(xì),需要的朋友可以參考下2024-07-07
在Vue使用$attrs實(shí)現(xiàn)構(gòu)建高級(jí)組件
本文我們主要來(lái)看下Vue3中的$attrs屬性。首先,我們會(huì)介紹它的用途以及它的實(shí)現(xiàn)與Vue2有哪些不兩同點(diǎn),并通過(guò)事例來(lái)加深對(duì)它的理解2022-09-09
vue 如何添加全局函數(shù)或全局變量以及單頁(yè)面的title設(shè)置總結(jié)
本篇文章主要介紹了vue 如何添加全局函數(shù)或全局變量以及單頁(yè)面的title設(shè)置總結(jié),非常具有實(shí)用價(jià)值,需要的朋友可以參考下2017-06-06
vue實(shí)現(xiàn)文字橫向無(wú)縫走馬燈組件效果的實(shí)例代碼
這篇文章主要介紹了vue 文字橫向無(wú)縫走馬燈組件的實(shí)現(xiàn)代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
vue移動(dòng)端實(shí)現(xiàn)紅包雨效果
這篇文章主要為大家詳細(xì)介紹了vue移動(dòng)端實(shí)現(xiàn)紅包雨效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-07-07
vue mounted()函數(shù)中無(wú)法定義初始化樣式的原因分析
這篇文章主要介紹了vue mounted()函數(shù)中無(wú)法定義初始化樣式的原因分析,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
解決項(xiàng)目vite1.0升級(jí)到2.0打包遇到Some chunks are larger問(wèn)題
本文主要介紹了解決項(xiàng)目vite1.0升級(jí)到2.0打包遇到Some chunks are larger問(wèn)題,文中根據(jù)實(shí)例編碼詳細(xì)介紹的十分詳盡,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-03-03
Vue實(shí)現(xiàn)簡(jiǎn)單分頁(yè)器
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)單分頁(yè)器,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2018-12-12

