【Vue】Vue+axios 解决跨域问题

好不容易用node把接口写好了，Postwomen测试也通过

前端Vue想要提交表单（登录）的时候却报了个错

可知是浏览器跨域问题
关于浏览器的跨域问题，具体这里不说，仅仅记录个人解决跨域问题的方案

也是搜了许多不同的博文，但是都不管用，也不是很理解，自己百般尝试才有了一个解决方案

假设我的Vue项目运行在http://localhost:8080
后端的接口是：http://localhost:3000/users/login

1.配置proxyTable，详细文件位置看图

上面这段代码的效果就是将本地8080端口的一个请求代理到了http://localhost:8080/users/login这一域名下：

‘http://localhost:8080/api’ ===> ‘http://localhost:3000/api’

为什么后端没有‘api’ 的字样，但设置里要有‘/api‘’？
这是为了把所有的接口，统一规范为一个入口，名字就称api，在一定程度上会解决路由冲突
可参考此篇博文：如何在vue里面优雅的解决跨域，路由冲突问题

        pathRewrite:{
            '^/api':''
        }

这一段代码，是把咱们虚拟的这个api接口去掉（重写），此时真正去后端请求的时候并不会携带api这个前缀了，但是前端发起http请求的时候，还必须加上api前缀才能匹配到这个代理

2.封装axios，自定义接口

这里参考此篇博文：点击

效果如下：（故意输错密码）