vue项目实现webpack配置代理,解决跨域问题

跨域问题是前端开发中经常遇到的问题之一。在开发过程中，我们可能需要请求不同域名的 API 接口，但跨域请求可能会被浏览器阻止，从而导致请求失败。为了解决这个问题，我们可以借助 webpack 的代理功能来将请求指向同域下的接口，从而实现跨域请求。

首先，为了使用 webpack 的代理功能，我们需要安装 http-proxy-middleware 包。在终端中执行以下命令即可：

npm i -D http-proxy-middleware

安装完成之后，我们需要在 webpack 的配置文件中进行相应的配置。以 vue-cli 3.x 创建的项目为例，在项目目录下找到 vue.config.js 文件，并添加以下内容：

const proxyTarget = 'http://localhost:3000';

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

配置中，我们指定了一个代理目标 proxyTarget，即将所有请求都代理到 http://localhost:3000 这个地址下。接着，我们在 devServer 中添加了一个 proxy 属性，用于配置具体的代理规则。这里的规则是：将所有以 /api 开头的请求代理到 proxyTarget 下，并且在请求头中添加 Origin 字段，以支持跨域请求。

在 pathRewrite 中，我们将请求路径中的 /api 替换为空字符串，从而能够正确地请求到后端接口。

最后，在我们的代码中发送请求时，只需要将请求路径写为 /api/path/to/api 的形式即可。例如：

axios.get('/api/todo/list')

以上就是使用 webpack 代理来解决跨域问题的方法。相信这样的配置能够帮助你在开发过程中少踩一些坑。