Vue.js 中使用 devServer 代理配置：详细指南

{"title":"Vue.js 中使用 devServer 代理配置：详细指南","description":"了解如何在 Vue.js 的 vue.config.js 文件中使用 devServer 配置代理，轻松实现跨域请求。示例代码展示了如何代理 API 请求并解释相关配置选项。","keywords":"vue.js, vue.config.js, devserver, 代理, 跨域, api, axios, changeOrigin, pathRewrite","content":"在 vue.config.js 文件中，可以使用 devServer 配置来设置代理。\n\n以下是一个示例：\n\njavascript\nmodule.exports = {\n devServer: {\n proxy: {\n '/api': {\n target: 'http://localhost:3000',\n changeOrigin: true,\n pathRewrite: {\n '^/api': ''\n }\n }\n }\n }\n}\n\n\n在上面的示例中，我们配置了一个代理，将所有以 /api 开头的请求都转发到 http://localhost:3000。changeOrigin 选项用于修改请求头中的 Host 字段，pathRewrite 选项用于重写请求路径。\n\n这样，当你在前端代码中发送请求时，可以使用 /api 前缀，例如：\n\njavascript\naxios.get('/api/users')\n\n\n这个请求将被代理到 http://localhost:3000/users。"}