当前位置:   article > 正文

vue跨越解决;及代理之后会出现404_vueproxy代理解决跨域linux报错404

vueproxy代理解决跨域linux报错404

vue跨越解决;及代理之后会出现404

1.根目录下创建vue.config.js

// vue.config.js
module.exports = {
    devServer: {
        proxy: {
            // 当你vue请求路径中包含/api,那么vue会自动帮你代理请求到你的后端地址
            // 比如我vue请求的是 '/api/user/getUser',那么会帮我代理请求到后端地址
            '/api': {
                // 后端地址
                target: "http://127.0.0.1:8088",
                /**
                    官方文档的意思:将主机头的来源更改为目标 URL
                    简单理解就是需不需要代理
                **/
                changeOrigin: true,
                /**
                    重写目标地址,比如我vue请求的是/api/user/getUser
                    经历过重写之后,我们请求的地址是http://localhost:8081/user/getUser
                    这里用的是正则表达式,^符号是用来限制开头
                    意思就是匹配vue请求的开头是否为/api,是的话就进行重写替换
                **/
                pathRewrite: {
                    ["^/api"]: ""
                }
            }
        }
    }
}
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27

2.接口写法,

    this.axios({method:"post",url:"/user/login",data:{
      tel:"admin",
      passWord:"admin"
    }}).then(res=>{
      console.log(res)
    })   



在main.js中加入
axios.defaults.baseURL = '/api'
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

3.重新启动项目

4.要是以上都没有问题还是404 那就是缓存了,换浏览器,多重启几次!!!我的就是莫名奇妙就好了。

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/IT小白/article/detail/619375
推荐阅读
相关标签
  

闽ICP备14008679号