在实际开发中,前端除了请求后端服务器还可能会请求文件服务器等,他们的地址是不一样的,例如后台地址是localhost:8001,文件服务器是localhost:8002,这里我使用vue-admin-template后台模板来举例如何配置。
配置跨域代理
在vue中使用proxy进行跨域的原理是:将域名发送给本地的服务器(启动vue项目的服务,loclahost:8080),再由本地的服务器去请求真正的服务器。
首先,配置好前端跨域代理,在vue.config.js中
其中process.env.VUE_APP_BASE_API代表.env.development文件中的VUE_APP_BASE_API
我们可以从request.js中看到请求地址会是VUE_APP_BASE_API(/dev-api)+请求路径。
我们验证一下:
可以看到此时请求地址都是http://localhost:9528/dev-api/+请求路径,这样前端跨域就配置好了,通过前端代理,实际的请求地址是http://localhost:8001/+请求路径。
这样文章开头的问题就产生了,所有请求都是默认代理请求的是localhost:8001,当我们使用文件上传或者请求别的服务,如果文件服务器地址是localhost:8002,那我们就不会请求到,那么该如何配置呢?
通俗的说就是把/dev-api之前的都换成了localhost:8002,然后交给启动vue项目的服务器去请求。
配置多个服务端请求
其实只要弄明白了上面处理跨域的过程,就很容易理解如何配置多个服务器请求,无非是再处理一遍,在.env.development文件中添加新的代理字段,VUE_APP_UPLOAD_API = '/dev-upload-api'
对应的在vue.config.js中添加一个新的代理,
我们复制request.js,改名request-proxy.js,内容一致,只修改baseURL:''
(1)在上传图片文件时如下图的写法,请求路径会变成http://localhost:9528/dev-upload-api/upload/uploadImage,实际上的请求路径是http://localhost:8002/upload/uploadImage,就成功了。
(2)在请求的需要使用的api文件中如下图引入使用
这样请求路径会变成http://localhost:9528/dev-upload-api/+请求路径,实际的请求地址变成了http://localhost:8002/+请求路径。
可能你的项目不是使用的vue-admin-template,但只要是vue+axios,配置的思路都是一样的,只要能理解了如何配置,相信你也可以解决自己的问题。