devServer.proxy如何配置跨域请求

devServer.proxy可以配置跨域请求，其配置方式如下：

// 代理配置
devServer: {
  proxy: {
    // 请求代理的路径，可以是字符串或对象
    '/api': {
      // 目标服务器的地址，可以是域名或IP地址
      target: 'http://localhost:3000',
      // 设置请求头Host的值为目标服务器地址
      changeOrigin: true,
      // 重写请求地址（去掉前缀）
      pathRewrite: {
        '^/api': ''
      }
    }
  }
}

上面的配置意思是将发往`/api`路径的请求代理到`http://localhost:3000`地址，目标服务器的地址会被当作Host头的值发送给目标服务器，同时重写请求路径（去掉前缀）。

这样配置后，当我们从前端发送请求时，只需将请求地址设置为`/api`，就可以自动代理到目标服务器上了。

相关问题

devServer 配置跨域代理

devServer 配置跨域代理可以通过 webpack 的 devServer.proxy 选项来实现。在 webpack 配置文件中，可以添加如下代码：

module.exports = {
  // ...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://api.example.com',  // 目标 API 地址
        changeOrigin: true,  // 设置请求头中的 Host 为目标 API 的域名
        pathRewrite: {
          '^/api': '',  // 将请求路径中的 '/api' 替换为空字符串
        },
      },
    },
  },
};

上述配置中，我们定义了一个代理规则，将以 '/api' 开头的请求转发到目标 API 地址 'http://api.example.com'。changeOrigin 选项设置为 true 可以修改请求头中的 Host，避免一些反向代理的问题。pathRewrite 选项可以对请求路径进行重写，这里将 '/api' 替换为空字符串。

配置完成后，启动 webpack-dev-server 后，前端发起的以 '/api' 开头的请求将被代理到目标 API 地址。例如，前端请求 '/api/users'，实际上会被转发到 'http://api.example.com/users'。

需要注意的是，devServer.proxy 只适用于开发环境，在生产环境中需要使用其他方式进行跨域处理。

vue.config.js如何配置跨域请求

为了在 Vue.js 项目中配置跨域请求，你需要在项目的根目录下创建一个 vue.config.js 文件，然后在文件中添加以下代码：

module.exports = {
  devServer: {
    proxy: {
      '/api': { // 接口的前缀
        target: 'http://localhost:3000', // 你想要请求的后端 API 地址
        ws: true,
        changeOrigin: true
      }
    }
  }
}

在这个示例中，我们将接口的前缀设置为 `/api`，并将请求代理到 `http://localhost:3000`，也就是我们的后端 API 地址。你可以根据你的实际情况修改这些配置。

一旦你完成了这些配置，你可以在 Vue.js 项目中使用 axios 或其他 AJAX 库来发送跨域请求。在这个示例中，我们可以使用以下代码发送一个 GET 请求：

axios.get('/api/user/123')
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 处理错误
  })

其中，`/api/user/123` 是我们代理到后端 API 的接口地址。