vue开发中在本地dev服务器访问后端API

在开发过程中需要在使用dev服务器时访问后端API时,可以让dev服务器将所有API请求代理到实际的后端。
要配置代理规则,请在config / index.js中编辑dev.proxyTable选项。 Vue的dev服务器使用http-proxy-middleware进行代理,可以参考其文档以获取详细的用法。 这是一个简单的例子:

// config/index.js
module.exports = {
  // ...
  dev: {
    proxyTable: {
      // proxy all requests starting with /api to jsonplaceholder
      '/api': {
        target: 'http://jsonplaceholder.typicode.com',//这里是你要代理的域名
        changeOrigin: true,
        pathRewrite: {
          '^/api': ' '  //匹配到'/api',就变成' '
        }
      }
    }
  }
}

将设你原本请求是 localhost:8080/api/posts/1,现在就变成http:/jsonplaceholder.typicode.com/posts/1

参考:https://vuejs-templates.github.io/webpack/proxy.html

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

推荐阅读更多精彩内容

  • 要使用这个模板,可以用vue-cli来支持一个项目。 $ npm install -g vue-cli $ vue...
    吃鸡翅的可乐阅读 247评论 0 2
  • 懵逼,竟然没有中文版。自己对英文不敏感,看一遍记录下来,备用。 介绍 这个模板是针对大型应用,默认你已经熟悉Web...
    奇董阅读 871评论 0 2
  • feisky云计算、虚拟化与Linux技术笔记posts - 1014, comments - 298, trac...
    不排版阅读 3,939评论 0 5
  • nodejs服务实现反向代理,解决本地开发接口请求跨域问题 前后端分离项目需要解决第一个问题就是,前端本地开发时如...
    莫逐阅读 61,038评论 0 4
  • 一、他的秘密 他们的爱情,在她的眼里是完美的。 工作中,他上进,生活中,他细心耐心,每逢纪念日,给她买的礼物都是她...
    念衡阅读 1,412评论 4 17