vue项目中跨域设置实践（主要是踩过的坑）

之前的文章vue项目的跨域设置，中提到了vue的跨域设置：

从前端向后台请求“/list”这个地址的时候，在浏览器看到的url前缀是你本地运行服务"localhost:XXXX"，但实际上，你请求的地址是'http://api.xxxxxxxx.com'

proxyTable: {
        '/list': {
        target: 'http://api.xxxxxxxx.com',
        pathRewrite: {
        '^/list': '/list'
        }
    }
}

---

当我自己写demo实践的时候，发现报错了，查阅资料后，发现之前的这段代码应该修改为

从前端向后台请求“/list”这个地址的时候，在浏览器看到的url前缀是你本地运行服务"localhost:XXXX/list"，但实际上，你请求的地址是'http://api.xxxxxxxx.com/list'

pathRewrite 中的“'^/list'，可以理解为你请求的地址，后面的值”/list“，会拼接在你的target值得后面，作为实际请求的地址，对于上面这个例子，当你请求“/list”的时候，浏览器中的请求地址是'http://api.xxxxxxxx.com/list'，实际的请求地址是target的值 + '/list'

以上的例子不是真实的接口，那么，我们用一个真实的接口测试一下：

接口名：‘http://ustbhuangyi.com/sell/api’

请求类型： 'get'

请求代码

axios.get('/seller').then((res) => {

可以这样配置

// 正确示例

也可以这样配置

// 正确示例

image

错误配置,将会报404错误

// 错误示例

image

---

感悟：学习理论，不如动手敲代码，踩完坑，对学习的理论就有更深的理解了