在vue项目中经常遇到跨域的情况,这时我们可以在vue.config中设置server选项,这时vue cli会开启一个代理服务器接收服务器的请求
由于浏览器同源策略的限制,非同源间无法共享数据,而代理服务器相当于中介的存在,由于服务器间不通过ajax交换数据,则不存在同源策略限制,所以可以帮助前端实现跨域,但是代理解决跨域的方法,多用于辅助前端开发。
server:{
host:'localhost',
port:8080,
proxy:{
"/api":{
target:"http://api-manager.marsview.cc",
changeOrigin: true,
}
}
}
上述代码中,proxy中的配置值为对象,键名为对应的请求前缀,键值为配置项
请求前缀
请求前缀帮助前端区分是否进行服务器请求。如果请求地址为本地拥有的路径,则优先从本地查找文件,而不会发起请求。
配置项
target:代理的服务器地址,不要加斜杠
changeOrigin:默认为true,是否更改源的host地址,即:请求target接口时,以相同的源“欺骗”服务器。为false时则以实际请求的源地址请求。
pathRewrite:值为一个对象,键名为正则,键值为替换的内容,一般是空字符串。是否重写路径。由于请求前缀的关系,请求时会添加上请求前缀,路径就会错,所以需要添加这个属性,替换请求前缀为空字符串。