vue跨域proxy的方法和解读

如果不设置跨域，在浏览器跨域请求接口的时候，如果不是基本请求（get,post,delete），或者请求时带了自定义header，比如token所在的Authorization，浏览器就会先发一个options请求去试探后台接口，如果确定没有问题，才会把真正的请求发过去。
如果后台没有开放options的请求通过，就会出现跨域不通过的问题。
在vue前端设置跨域可以解决这个问题

target就是实际要访问的接口的域名
changOrigin: true,就是设置跨域

/api的意思是，他代替了target中的内容http://ttw.vaiwan.com
比如本来在axios中要访问接口：http://ttw.vaiwan.com/admin/user/list
那么现在在axios中只要写/api/admin/user/list

pathRewrite的作用如下：当设置了/api的时候，实际上/api就成为了一个代理
比如axios访问接口的时候，浏览器中会显示其访问的是“/api”，但实际上我们认为他访问的是“http://ttw.vaiwan.com”，但由于其代理的特性，实际上他真正访问的地址会变成：
http://ttw.vaiwan.com/api/admin/user/list
问题在于，我们要访问的接口是http://ttw.vaiwan.com/admin/user/list，没有那个“/api”
所以pathRewrite: { ‘^/api’: ‘’ }的作用就是将最终地址：
http://ttw.vaiwan.com/api/admin/user/list中的/api给去掉，这样访问地址就会正确了

但有时会有一个问题，就是原来后台的接口里如果本来就有/api的字符串，比如本来后台的接口就是http://localhost:5000/api/banner/bannerUpload，那么就要特别处理：
1-可以改变/api的命名，并不见得一定要叫/api，叫/aaa也行
2-将pathRewrite写成‘^{/api’:’/api’，这样最终的接口里就会保留一个/api，保证接口地址的正确性（}/api是一个正则，从后往前算，比如XXX/api/apiYYY会变成XXX/apiYYY，而不是两个/api，并不会因为/api前面还有一个/api，就会变成2个，注意他是一个正则，而不是简单一个字符串替换的思路）