[JavaScript知识库]vue配置前端代理

接口有很多都是存在跨域问题的，但是cors、jsonp的方式都是依赖后端去解决支持问题，所以只能考虑代理操作。

针对vue项目的代理配置需要在项目的根目录下创建文件“vue.config.js”，切勿写错名字 ！

这个文件修改之后需要重启项目才能生效 。

module.exports = {
    // 开发服务器设置
    devServer: {
        open: true,
        // 设置 npm run serve 启动后的端口号
        port: 3000,
        // 如果你开始了eslint,不要让eslint在页面中遮罩，它错误会在console.log控制台打印
        overlay: false,
        // vue项目代理请求
        proxy: {
            // 规则
            // axios中相对地址开头的字符串  匹配请求uri中的前几位
            "/api": {
                // 把相对地址中的域名 映射到 目标地址中
                // localhost:3000 => https://api.iynn.cn/film/api/v1/
                target: "https://api.iynn.cn/film/api/v1",
                // 修改host请求的域名为目标域名
                // changeOrigin: false,
                changeOrigin: true,
                // 请求uri和目标uri有一个对应关系
                // 请求/api/login ==> 目标 /v1/api/login
                pathRewrite: {
                    "^/api": "",
                },
            },
        },
    },
};

接下来封装网络请求：

在封装前请先安装axios ：npm i -S axios

在.env.development和.env.production文件中配置俩个接口的请求前缀，以便复用

// .env.development
VUE_APP_API_PREFIX="/api/"

// .env.production
VUE_APP_API_PREFIX="https://api.iynn.cn/film/api/v1/"

?然后请求地址文件配置：（是为了后期接口地址如果发生了变化，我们可以统一去管理和修改 ）

// 纯粹是为了模块化
// 该文件定义了项目中所有外部接口请求的地址信息

// 获取前缀
let prefix = process.env.VUE_APP_API_PREFIX;

// 定义地址映射
let uri = {
    // 获取城市信息
    citiesInfo: prefix + "getCitiesInfo",
    // 获取正在热映列表
    nowPlaying: prefix + "getNowPlayingFilmList",
    // 获取即将上映列表
    comingSoon: prefix + "getComingSoonFilmList",
    // 其它的后续用到再加....
};

// 导出
export default uri;

封装请求文件 路径： http/request.js?

// 作用：封装axios

// 导入axios
import axios from "axios";

// 加工axios的环节
// 拦截器：对请求或响应进行拦截处理
// 分类：
//      请求拦截器（上高速的收费站）
axios.interceptors.request.use((cfg) => {
    // 在请求发出去之前拦下，加工一下请求配置信息
    // 场景：接口安全中要求加token到头信息中的时候
    // if(localStorage.getItem("token")){
    //     cfg.defaults.headers.token = localStorage.getItem('token')
    // }
    return cfg;
});
//      响应拦截器（下高速的收费站）
axios.interceptors.response.use((res) => {
    // 在获取到响应的时候拦截，加工下响应的数据
    // 场景：更新jwt的时候使用 && 简化操作
    // if (res.data.token) {
    //     localStorage.setItem("token", res.data.token);
    // }
    // 之前获取axios的返回结果都是从res.data中获取的，比较麻烦，我希望res就是返回结果
    return res && res.data;
});

// 导出axios
export default axios;

?最后注册axios到vue实例上：

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
// 导入axios
import axios from "./http/request";
// 将axios注册到vue实例上（原型上）
Vue.prototype.$http = axios;
Vue.config.productionTip = false;

new Vue({
    router,
    store,
    render: (h) => h(App),
}).$mount("#app");

测试：

<script>
import uri from "@/config/uri";
export default {
    async created() {
        let ret = await this.$http.get(uri.getCity);
        console.log(ret);
    },
};
</script>