vue配置代理解决跨域问题

sudo0m Lv3

vue.config.js 文件中,你可以使用 devServer.proxy 选项来设置代理以解决跨域问题。下面是一个示例配置:

1
2
3
4
5
6
7
8
9
10
11
12
13
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:8000',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}
}
}
}

在这个示例中,我们设置了一个代理,将以 /api 开头的请求代理到 http://localhost:8000。其中的选项解释如下:

  • target:代理的目标地址。
  • changeOrigin:是否修改请求头中的 Host 字段为目标地址。
  • pathRewrite:路径重写规则,用于修改请求路径。

通过这个配置,当你在开发环境中发送 /api/users 的请求时,它会被代理到 http://localhost:8000/users

你可以根据你的具体需求和后端配置进行相应的修改。确保在项目根目录下的 vue.config.js 文件中添加这个配置,然后重新启动开发服务器,代理配置就会生效。

  • 标题: vue配置代理解决跨域问题
  • 作者: sudo0m
  • 创建于: 2023-07-04 17:51:32
  • 更新于: 2023-07-04 17:52:51
  • 链接: https://sudo0m.github.io/page/20230704175132/
  • 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。
此页目录
vue配置代理解决跨域问题