Vue-cli4 配置代理，解决开发跨域

• 什么情况下需要使用代理？
  • 如果您的前端应用和后端 API 服务器没有运行在同一个主机上，你需要在开发环境下将 API 请求代理到 API 服务器。

需要配置vue.config.js，vue.config.js是一个可选的配置文件，配置参考地址。如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。

配置好vue.config.js后，需要重启服务npm run serve

• 配置devServer
• Type: Object
  • 所有webpack-dev-server的选项都支持。

一：devServer.proxy 可以是一个指向开发环境 API 服务器的字符串：

module.exports = {
    // ...
    devServer: {
        port: 2105, // 本地服务访问的端口号，http://localhost:2105/
        open: false, // 告诉dev-server在服务器启动后打开浏览器。将其设置true为打开默认浏览器。
        // proxy 可以是一个指向开发环境 API 服务器的字符串
        // 这会告诉开发服务器将任何未知请求 (没有匹配到静态文件的请求) 代理到 http://localhost:2105/
        proxy: 'https://stg.sznai.com'
    },
}

二：如果你想要更多的代理控制行为，也可以使用一个path: options成对的对象:

// 路径中有 /api 的请求都会走代理
// 例如： axios.get('/api/user') => 实际请求地址是 https://stg.sznai.com/api/user
// 本地请求 Request URL: http://192.168.1.104:2105/api/user 就会被自动转发到 https://stg.sznai.com/api/user

module.exports = {
    // ...
    devServer: {
        port: 2105, // 本地服务访问的端口号，http://localhost:2105/
        open: false, // 告诉dev-server在服务器启动后打开浏览器。将其设置true为打开默认浏览器。
        // 配置代理
        proxy: {
          '/api': {
            target: 'https://stg.sznai.com',
            ws: true, // 是否启用 websockets
            changeOrigin: true // 主机头的起源保持默认进行代理时，可以设置changeOrigin以true覆盖此行为。
          },
          '/foo': {
            target: 'https://www.baidu.com'
          }
        }
    },
}