vue的vue cli创建的项目进行设置代理(解决跨域)
  • vue cli在2.x版本中创建 的项目有config和build,但是在vue cli 3.x版本中创建的目录结构中没有。
  • 在2.x版本中配置代理可以在config下面的index.js里面进行配置。
proxyTable: {
    '/api': {
         target: '表示代理的url,可以理解为请求的baseURL',
         "changeOrigin": true, // 如果设置为true,那么本地会虚拟一个服务器接收你的请求并代你发送该请求,
                               // 这样就不会有跨域问题(只适合开发环境)

         pathRewrite: {
            '^/api': '' //表示api替换为什么 这里替换为空,则表示'/api' 等同于target里面填写的
        }
     },
    // 多个代理继续写下去
}
  • 3.0以后,webpack被高度继承在脚手架中,没有了config文件夹,但是也能进行相关pei'zhi配置。
// 首先需要在项目根目录中新建一个vue.config.js来实现默认配置的覆盖(配置中的相关部分被重写)
module.exports = {
  devServer: { // 开发环境下runtime
    proxy: { // 代理服务器
      '/api': {
        target: 'http://localhost:8888',
        secure: false, //是否使用 Https安全传输协议
        changeOrigin: true
      }
    }
  }
}

注意:  一定要重启项目,否则依旧会失败。

暂无评论