vue项目配置代理
vue.config.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
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中添加以下代码：
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
server: { // 跨域的写法 proxy: { '/api': { target: 'http://nvzu.xxx.cn/', // 实际请求地址 changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, ""), }, }, }, // 不跨域的写法 /* server: { host: '192.168.1.195' // 0.0.0.0 }, */ |
axios.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 |
"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 } } } /* Plugin.install = function(Vue) { Vue.axios = _axios; window.axios = _axios; Object.defineProperties(Vue.prototype, { axios: { get() { return _axios; } }, $axios: { get() { return _axios; } }, }); }; Vue.use(Plugin) export default Plugin; */ |
页面使用proxy.axios.get/post进行获取跨域接口
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<template> <div class="home"> <img alt="Vue logo" 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 /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> |
