反向代理配置

反向代理主要是用于解决项目中接口跨域的问题。

注意：

在开发时候配置的反向代理在构建（将vue单文件组件转化成最终要上线时候用的html文件）后会失效，所以在正式上线的时候需要重新去解决跨域问题。

以下的配置需要写在vue.config.js文件中，该文件可能在当下项目中是没有的，则需要自己创建，然后将以下配置粘贴进去。

module.exports = {
    // 开发服务器设置
    devServer: {
        // 是否自动打开浏览器
        open: true,
        // 设置 npm run serve 启动后的端口号
        port: 3000,
        // 如果你开始了eslint,不要让eslint在页面中遮罩，它错误会在console.log控制台打印
        overlay: false,
        // vue项目代理请求
        proxy: {
            // 规则
            // axios中相对地址开头的字符串  匹配请求uri中的前几位
            // 通过前缀/api缺点是否要跨域
            "/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": "",
                },
            },
        },
    },
};

请注意，后续如果修改了项目根下的任意配置文件，都需要重新启动项目。