vue代理模式解決跨域詳解
跨域是什么
簡單的講就是你在一個地方使用另一個地方的資源,被瀏覽器給擋下來了,不讓不用!當然,它擋下來是有自己理由的:為了安全(╬▔皿▔)╯。
解決跨域
我是用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)文章
VUE3+Element-plus中el-form的使用示例代碼
這篇文章主要介紹了VUE3+Element-plus中el-form的使用示例代碼,本文通過圖文示例代碼相結(jié)合給大家介紹的非常詳細,需要的朋友可以參考下2024-07-07
在Vue使用$attrs實現(xiàn)構(gòu)建高級組件
本文我們主要來看下Vue3中的$attrs屬性。首先,我們會介紹它的用途以及它的實現(xiàn)與Vue2有哪些不兩同點,并通過事例來加深對它的理解2022-09-09
vue 如何添加全局函數(shù)或全局變量以及單頁面的title設(shè)置總結(jié)
本篇文章主要介紹了vue 如何添加全局函數(shù)或全局變量以及單頁面的title設(shè)置總結(jié),非常具有實用價值,需要的朋友可以參考下2017-06-06
vue mounted()函數(shù)中無法定義初始化樣式的原因分析
這篇文章主要介紹了vue mounted()函數(shù)中無法定義初始化樣式的原因分析,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03
解決項目vite1.0升級到2.0打包遇到Some chunks are larger問題
本文主要介紹了解決項目vite1.0升級到2.0打包遇到Some chunks are larger問題,文中根據(jù)實例編碼詳細介紹的十分詳盡,具有一定的參考價值,感興趣的小伙伴們可以參考一下2022-03-03

