Vue3跨域解决方案实例详解
短信预约 -IT技能 免费直播动态提醒
vue项目配置代理
vue.config.js
const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
transpileDependencies: true,
devServer:{
proxy:{
'/api':{
target: 'http://xx.xx.xxx.xx',
changeOrigin:true,
pathRewrite: {
'^/api': ''
}
}
}
}
})如果是用vue3+ts则在vue.config.ts中添加以下代码：
server: {
// 跨域的写法
proxy: {
'/api': {
target: 'http://nvzu.xxx.cn/', // 实际请求地址
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ""),
},
},
},
// 不跨域的写法
axios.js
"use strict";
import axios from "axios";
// Full config: https://github.com/axios/axios#request-config
axios.defaults.baseURL = '/api' || '';
// axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
// axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
let config = {
// 这里的api就是获取configJS中的地址
baseURL: '/api'
// timeout: 60 * 1000, // Timeout
// withCredentials: true, // Check cross-site Access-Control
};
const _axios = axios.create(config);
_axios.interceptors.request.use(
function(config) {
// Do something before request is sent
return config;
},
function(error) {
// Do something with request error
return Promise.reject(error);
}
);
// Add a response interceptor
_axios.interceptors.response.use(
function(response) {
// Do something with response data
return response;
},
function(error) {
// Do something with response error
return Promise.reject(error);
}
);
export default{
install:function(app){
app.config.globalProperties.axios = _axios;
app.config.globalProperties.$translate = (key) =>{
return key
}
}
}
页面使用proxy.axios.get/post进行获取跨域接口
<template>
<div class="home">
<img alt="Vue logo" class="lazy" data-src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
import {getCurrentInstance} from 'vue' // 引入Vue3中的getCurrentInstance
// @ is an alias to /class="lazy" data-src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'HomeView',
mounted(){
const {proxy} = getCurrentInstance();
console.log(proxy);
// Axios.get
proxy.axios.get('/index_category/data').then((e)=>{
console.log(e);
})
},
components: {
HelloWorld
}
}
</script>到此这篇关于Vue3跨域解决方案实例详解的文章就介绍到这了,更多相关Vue3跨域解决方案内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
免责声明：
① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的，并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据，供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。
② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
