vue3项目的跨域解决方式中代理服务器的实现方式代码示例

在 Vue 3 项目中解决跨域问题，可以使用代理服务器来转发请求。下面是一个示例代码：

首先，安装 http-proxy-middleware 包：

npm install http-proxy-middleware

然后，在项目的根目录下创建一个 proxy.js 文件，用于配置代理服务器的转发规则：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',  // 指定需要转发的路径，这里以 '/api' 开头的请求会被转发
    createProxyMiddleware({
      target: 'http://example.com',  // 指定目标服务器的地址
      changeOrigin: true,  // 设置为 true，以便将请求头中的 host 设置为目标服务器的地址
      pathRewrite: {
        '^/api': '',  // 将请求路径中的 '/api' 替换为空字符串
      },
    })
  );
};

接下来，在 vue.config.js 文件中配置代理服务器：

module.exports = {
  // ...
  devServer: {
    before: require('./proxy.js'),  // 引入代理服务器配置
  },
};

最后，重启开发服务器即可生效。

这样配置后，当 Vue 3 项目中的请求路径以 /api 开头时，代理服务器会将请求转发给目标服务器。例如，当发送请求 http://localhost:8080/api/users 时，代理服务器会将请求转发给 http://example.com/users。

请注意，以上示例中的配置是针对开发环境的，如果要在生产环境中使用代理服务器，需要根据具体的部署环境进行相应的配置调整