应用场景:现实中,我们经常会遇到前后端分开开发的情况,由于前端使用的vue-cli地址是node帮我们搭建了一个本地的服务器,一般是http://localhost:8080,这个在我们创建vue项目时就帮我们搭建好的。这里面的端口我们是可以改变的,可以在vue.config.js(cli3以后这个文件需要自己创建)文件里的webServer里修改post端口。代码块如下:
module.exports = {
devServer: {
port : 2000,
}
}
上面说的都是本地开发是的服务器地址,但是后台开发的代码都是部署在服务器上的,这些服务器的网址和你本地的地址明显出现了跨域的问题,所以你在本地使用Axios等方式去请求后台数据的时候就出现了跨域的情况。那么如何去处理呢?
解决问题:
- 简单的使用express搭建一个本地的node服务器,端口绑定到3000
- 本地使用使用axios请求我们搭建好的本地node服务器,按照我们之前应用场景里写的端口是2000,浏览器net里会出现了服务器找不到404的报错
- 修改devServer里的proxy实现跨域请求
module.exports = { devServer: { port : 2000, proxy: { '/test': { target: 'http://localhost:3000', pathRewrite: {'^/test' : ''}, //把api替换成'',也就是'^/api' => '' logLevel: "debug" //输出跨域请求的信息 } } } }
代码的大致意思就是,你axios请求网址会把请求的网址会被替换成target里的http://localhost:3000。也就是你本地的http://localhost:2000 ====》http://localhost:3000。具体实现大概是axios发送一个请求
,被proxy拦截然后查看有没有"/test"这个key值,如果有那就把这个请求的网址替换成taget了的http://localhost:3000。然后查看是否有pathRewrite,如果有,则把/test替换成‘’。具体代码:
其中logLevel: "debug" 是为了查看跨域的信息,所以上面的代码效果是
可以看到跨域请求已经完成。
-
就上面所说的内容axios请求里的/test和proxy里的/test是对应的。