Vue-Cli 项目将本地环境模拟为线上环境

[Dream4ever]

解决过程

开发时运行在本地的前端项目，调用服务器上的用户登录接口，返回的 cookie 因为和本地的域名不一致，所以无法保存，导致其他需要权限的接口都因没有 cookie 而调用失败。

要想将运行在 localhost 上的前端项目，模拟为运行在线上环境 web.abc.com 上的项目，需要进行如下修改。

修改 vue.config.js 文件中的 proxy 字段为类似下面的内容：

    proxy: {
      '/api': {
        target: 'http://api.abc.com/api',
        ws: false,
        changeOrigin: true
      }
    }

然后修改本机的 HOST 文件，加上 127.0.0.1 web.abc.com 这么一行，必须要的话，在修改完 HOST 文件后刷新 DNS。

这样一来，在本地环境访问 web.abc.com，其实访问的是搭建在本地 localhost 的前端项目，同时后端 API 返回的 cookie 也可以正常保存。

参考资料

• 关键字：vue-cli development localhost domain
• 关键字：webpack 代理
• Vue CLI: Using a custom domain
• webpack开发配置API代理解决跨域问题-devServer