Vue项目接口代理需要注意的几点
2020-08-26 15:42:34

在做项目中,我们可能会遇到接口地址跨域的问题,有时候不想找后端去处理这个时候我们要怎么做呢,其实有个叫代理的东西可以帮我们快速的解决这个问题,第一步项目中创建一个vue.config.js的文件,在里面添加如下代码:

module.exports = {
    publicPath: "./",
    devServer: {
        proxy: {
            '/api': { 
                target: 'https://aijiumai.cn/api/', //对应服务器地址
                changeOrigin: true, //允许跨域
                ws: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
};

我们添加了之后就可以使用/api直接代替接口地址,只要axios请求地址有api就是自动替换掉,看代码

getLIst() {
    this.$axios({
        href: "/api/getLIst",//这里对应的就是https://aijiumai.cn/api/getLIst
    }).then((res) => {
        console.log(res);
    });
},

到了这里,特别要注意一点,就是axios的地址参数要弄url,不要弄baseURL,不然会不生效,我一开始就这里坑了好久。

到了这里的话,我们本地开发就基本没啥问题了,但是打包之后又会出问题,打包之后的代理就失效了,所以我们需要做些处理看代码:

import Axios from "axios";
export async function axios(arr) {
    let axios = await new Promise((resolve, reject) => {    
        let url = process.env.NODE_ENV === "development" ? arr.href : "https://aijiumai.cn/"+arr.href;//这里就是判断环境的,是否开发环境还是测试环境的
        Axios({
            method: arr.method || "POST",
            url: url,
            timeout: arr.timeout || 10000000000000000,
            data: arr.data || {},
            headers: arr.headers || {
                "content-type": "application/json",
            },
        })
            .then((res) => {
            resolve(res.data);
        })
            .catch((err) => {
            reject(err);
        });
    });

    return axios;
}

到了这里就完美解决了。

{{item.name}}