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

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,695评论 1 45
  • 去年有段时间得空,就把谷歌GAE的API权威指南看了一遍,收获颇丰,特别是在自己几乎独立开发了公司的云数据中心之后...
    骑单车的勋爵阅读 20,675评论 0 41
  • 在前端开发中,“跨域”是绕不过去的,了解跨域之前,先要知道浏览器的同源策略 同源策略:请求的url地址,必须与浏览...
    lovelytong阅读 11,826评论 0 3
  • # Python 资源大全中文版 我想很多程序员应该记得 GitHub 上有一个 Awesome - XXX 系列...
    小迈克阅读 3,041评论 1 3
  • 现在的我越来越感谢这两年的经历,和我上了大学!这是我命运的转折点! 我在我的原生家庭里,我是一个被忽略的人,母...
    沉淀时间阅读 135评论 0 0