vue3.0封装axios以及跨域问题

1.跨域问题

常见错误：404 not found...

解决办法：在根目录下创建文件vue.config.js

module.exports = {
    publicPath: '/',
    outputDir: 'dist',
    devServer: {
        open: true,
        host: 'localhost',
        port: '8081',
        proxy: {
            '/api': {
                target: 'http://127.0.0.1:8080', // 你要请求的地址
                ws: true,
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
};

注意：http://127.0.0.1:8080这个改为你要请求的地址，而且一定要带上http。

2.封装axios

在src目录下创建request文件夹，在request文件夹李创建request.js与api.js这两个文件。

request.js：

request.js是用来请求拦截和响应拦截的。

//拦截文件

import axios from 'axios';

//创建一个实例
const instance = axios.create({
    baseURL: 'http://192.168.6.70:8086',
    //请求延时为3000毫秒
    timeout: 3000,
})

//拦截器 请求拦截
instance.interceptors.request.use(config =>{
    //配置项  携带的数据(部分接口需要拿到token)
    let token = localStorage.getItem('token');
    //如果有token 就把token的值给配置文件的headers中
    if(token){
        // config.headers.token = token;

        //如果token有其他的名字 如：a-token
        config.headers = {
            "a-token": token
        }
    }
    return config;
}, err =>{
    return Promise.reject(err);
});

//拦截器 响应拦截
instance.interceptors.response.use(res =>{
    return res;
}, err =>{
    return Promise.reject(err);
});

//整体导出
export default instance;

api.js：

api.js是用来封装你的请求的。

//将request.js整体导入
import request from './request';

//按需导出每个请求


//请求首页数据
export const GetHome = () => request.get('/api/AGV/GetAgvId');

3.使用封装的axios

index.vue:

<template>
    <div>
        <button @click="getData">发起一个get请求</button>
    </div>
</template>

<script>
//按需导入
import {GetHome} from '@/request/api.js'
export default {
    name: 'index',
    data() {
        return {   
        };
    },
    methods: {
        getData(){
            GetHome().then(res => {
                console.log(res)
            })
        }
    },
};
</script>