Vue-cli 配置 Webpack 代理来解决跨域问题

在前端开发中，经常会遇到跨域问题。跨域是指浏览器从一个源（协议 + 域名 + 端口）去请求另一个源的资源时，浏览器会出现跨域错误。为了解决这个问题，我们可以使用 Vue-cli 配置 Webpack 代理来实现跨域请求。

什么是 Webpack 代理

Webpack 代理是指在开发环境中，将请求转发到另一个服务器上的一种方式。比如，我们在开发时需要请求一个数据接口，但是该接口存在跨域问题，这时我们可以在本地启动一个代理服务器，将该请求转发到真正的服务器上，从而解决跨域问题。

如何配置 Webpack 代理

在 Vue-cli 3.x 中，我们可以在 vue.config.js 文件中配置 Webpack 代理。具体步骤如下：

1. 在项目根目录下创建 vue.config.js 文件。

2. 在 vue.config.js 文件中添加以下代码：

   // javascriptcn.com 代码示例
   module.exports = {
     devServer: {
       proxy: {
         '/api': {
           target: 'http://localhost:3000',
           changeOrigin: true,
           pathRewrite: {
             '^/api': ''
           }
         }
       }
     }
   }

   上述代码中，/api 是我们要请求的接口路径，http://localhost:3000 是真正的服务器地址。changeOrigin 参数设置为 true，表示开启跨域请求。pathRewrite 参数用于重写路径，将 /api 替换为空字符串。

3. 在组件中使用代理请求数据。

   axios.get('/api/users')
     .then(response => {
       console.log(response.data)
     })
     .catch(error => {
       console.log(error)
     })

   上述代码中，我们使用了 Axios 库来发送请求。由于我们在 vue.config.js 文件中配置了代理，因此请求路径为 /api/users，实际上会被代理到 http://localhost:3000/users，从而解决了跨域问题。

总结

通过上述步骤，我们可以很容易地配置 Webpack 代理来解决跨域问题。在实际开发中，我们可以根据需要配置多个代理，从而满足不同的请求需求。同时，我们也需要注意安全问题，避免代理服务器被滥用。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65866d26d2f5e1655d0e5a7d