阐述 Vue CLI 中 `webpack-dev-server` 的代理配置 (`proxy`) 的实现，以及它如何解决跨域问题。 - 智猿学院-前后端，数据库，人工智能，云计算等领域前沿技术讲座

各位靓仔靓女，大家好！我是你们今天的导游，啊不，是讲师！今天我们一起扒一扒 Vue CLI 中 webpack-dev-server 代理配置这个看似高冷，实则非常接地气的家伙，看看它如何轻松搞定让无数前端头疼的跨域问题。准备好你的咖啡和瓜子，Let’s go!

第一站：跨域这货到底是个什么鬼？

在进入代理的世界之前，我们先要搞清楚跨域这个拦路虎到底长什么样。想象一下，你开着一辆 Vue 应用的小车，想去服务器老大哥家拿点数据。但是，浏览器这个保安大爷拦住了你，说：“嘿，你这车牌号（域名、协议、端口号）跟老大哥不一样，不能进！” 这就是跨域。

更官方一点的说法：当你的前端应用（例如，运行在 http://localhost:8080）试图向一个不同源的服务器（例如，http://api.example.com）发起 HTTP 请求时，浏览器会出于安全考虑，阻止这个请求。

“源”是由协议、域名和端口号组成的。只要这三者中有一个不同，就被认为是不同的源。

第二站：为什么需要代理？

跨域问题的存在是为了保护用户的安全。如果允许任意网站随意访问其他网站的数据，那简直就是互联网的灾难。但是，在开发阶段，我们经常需要和后端的 API 联调，跨域就成了我们前进道路上的绊脚石。

这时候，代理就闪亮登场了！代理就像一个中间人，它会接收你的请求，然后伪装成你的邻居（和后端服务器同源），去后端服务器取数据，最后再把数据返回给你。这样，浏览器大爷就被蒙混过关了，跨域问题也就迎刃而解。

第三站：Vue CLI 中的 webpack-dev-server 代理配置

Vue CLI 已经为我们准备好了现成的代理工具，那就是 webpack-dev-server 的 proxy 选项。这个选项允许我们将特定 URL 的请求代理到另一个服务器。

要配置代理，我们需要修改 vue.config.js 文件（如果没有就创建一个）。

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://api.example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};

让我们来逐行解读这段代码：

devServer: 这是 webpack-dev-server 的配置项。
proxy: 这里是代理配置的核心。
'/api': 这是一个路径匹配规则。所有以 /api 开头的请求，都会被代理到 target 指定的服务器。
target: 'http://api.example.com': 这是目标服务器的地址。
changeOrigin: true: 这个选项非常重要！它告诉 webpack-dev-server，在请求头中修改 origin 字段，让服务器以为请求是来自 http://api.example.com 的。简单来说就是让服务器认为你和它是“一家人”。没有这个选项，一些服务器可能会拒绝请求。
pathRewrite: { '^/api': '' }: 这个选项用于重写请求路径。由于我们的前端代码中请求地址是 /api/users 这种形式，而实际上后端接口的地址是 http://api.example.com/users，所以我们需要把 /api 前缀去掉。 ^/api 是一个正则表达式，表示以 /api 开头的字符串。 '' 表示将匹配到的字符串替换为空字符串。

实战演练：一个完整的例子

假设你的前端应用运行在 http://localhost:8080，后端 API 服务器运行在 http://localhost:3000。你想从后端获取用户列表。

前端代码：

// src/components/UserList.vue
<template>
  <div>
    <h1>User List</h1>
    <ul>
      <li v-for="user in users" :key="user.id">{{ user.name }}</li>
    </ul>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      users: []
    };
  },
  mounted() {
    this.fetchUsers();
  },
  methods: {
    async fetchUsers() {
      try {
        const response = await axios.get('/api/users'); // 注意这里的请求地址
        this.users = response.data;
      } catch (error) {
        console.error('Error fetching users:', error);
      }
    }
  }
};
</script>

后端 API (Node.js + Express):

// server.js
const express = require('express');
const cors = require('cors'); // 引入 cors 中间件
const app = express();
const port = 3000;

app.use(cors()); // 使用 cors 中间件

app.get('/users', (req, res) => {
  const users = [
    { id: 1, name: 'Alice' },
    { id: 2, name: 'Bob' },
    { id: 3, name: 'Charlie' }
  ];
  res.json(users);
});

app.listen(port, () => {
  console.log(`Server listening at http://localhost:${port}`);
});

Vue CLI 配置 (vue.config.js):

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};

在这个例子中，我们前端代码向 /api/users 发送请求，webpack-dev-server 会将这个请求代理到 http://localhost:3000/users，后端 API 返回用户列表，最终前端成功渲染用户列表。

第四站：代理配置的更多姿势

除了上面最基本的配置，proxy 选项还支持更多高级用法。

多个代理规则： 你可以配置多个代理规则，将不同的 URL 代理到不同的服务器。

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://api.example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      },
      '/images': {
        target: 'http://cdn.example.com',
        changeOrigin: true
      }
    }
  }
};

使用函数进行动态代理： 你可以使用一个函数来动态地决定代理的目标服务器。这在你需要根据请求的内容来选择不同的后端服务时非常有用。

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: (req) => {
          if (req.headers.host === 'localhost:8080') {
            return 'http://localhost:3000';
          } else {
            return 'http://api.example.com';
          }
        },
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};

WebSocket 代理： webpack-dev-server 也支持 WebSocket 代理。你只需要在 proxy 配置中添加 ws: true 选项。

module.exports = {
  devServer: {
    proxy: {
      '/socket.io': {
        target: 'ws://localhost:4000',
        ws: true,
        changeOrigin: true
      }
    }
  }
};

第五站：changeOrigin 选项的深度解析

changeOrigin 选项是代理配置中非常重要的一个选项。它的作用是告诉代理服务器，是否要修改请求头中的 origin 字段。

changeOrigin: true: 代理服务器会将 origin 字段修改为目标服务器的地址。这可以解决一些服务器对 origin 字段进行校验的问题。
changeOrigin: false (默认值): 代理服务器不会修改 origin 字段。 origin 字段仍然是客户端的地址。

在大多数情况下，你需要将 changeOrigin 设置为 true，以避免跨域问题。某些服务器会检查 origin 字段，如果发现请求不是来自同一个源，就会拒绝请求。

第六站：pathRewrite 选项的灵活运用

pathRewrite 选项允许你重写请求的路径。这是一个非常强大的工具，可以让你轻松地将前端的请求路径映射到后端的实际路径。

pathRewrite 选项接受一个对象，对象的键是一个正则表达式，值是一个用于替换匹配到的字符串的字符串。

简单的路径重写：

pathRewrite: {
  '^/api': '' // 将所有以 /api 开头的请求路径中的 /api 替换为空字符串
}

更复杂的路径重写：

pathRewrite: {
  '^/api/v1': '/v2' // 将所有以 /api/v1 开头的请求路径中的 /api/v1 替换为 /v2
}

使用正则表达式捕获组：

pathRewrite: {
  '^/api/(.*)': '/$1' // 将所有以 /api/ 开头的请求路径中的 /api/ 替换为 /，并保留后面的内容
}

第七站：解决 HTTPS 代理问题

如果你的后端 API 服务器使用了 HTTPS 协议，你可能需要在代理配置中添加 secure: false 选项。

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://api.example.com',
        changeOrigin: true,
        secure: false // 忽略 SSL 证书验证
      }
    }
  }
};

secure: false 选项告诉 webpack-dev-server 忽略 SSL 证书验证。这在开发环境中非常有用，因为你可能使用的是自签名证书。 但是，在生产环境中，千万不要这样做！ 在生产环境中，你需要使用有效的 SSL 证书。

第八站：常见问题和注意事项

代理不生效： 确保你的请求路径与代理规则匹配。检查 vue.config.js 文件中的配置是否正确。重启 webpack-dev-server。清除浏览器缓存。
CORS 错误： 如果你仍然遇到 CORS 错误，即使你已经配置了代理，可能是因为你的后端服务器没有正确配置 CORS。你需要在后端服务器上设置 Access-Control-Allow-Origin 头。
生产环境： webpack-dev-server 的代理配置只适用于开发环境。在生产环境中，你需要使用其他的代理服务器，例如 Nginx 或 Apache。
安全问题： 代理服务器可以访问你的所有请求和响应数据。因此，你需要确保你的代理服务器是安全的。

第九站：总结与展望

webpack-dev-server 的代理配置是一个非常方便的工具，可以帮助我们轻松解决开发环境中的跨域问题。掌握了代理配置，你就拥有了一把锋利的宝剑，可以斩断跨域的荆棘，畅游在前后端联调的海洋中。

希望今天的讲座对大家有所帮助！记住，实践是检验真理的唯一标准。多动手尝试，你才能真正掌握代理配置的精髓。

最后，祝大家编码愉快，Bug 远离！下次再见！

发表回复 取消回复

发表回复取消回复