Vue2.5开发环境跨域配置

这里在开发环境中主要借助的是webpack里devServer下的proxy属性:
如果使用vue脚手架生成的webpack完整版,在build/webpack.dev.config.js中找到devServer;
如果是vue脚手架生成的webpack简版,在根目录的webpack.config.js文件中找到devServer;

添加如下内容:

devServer:{
  ...
  proxy:{
      '/api': {   //这里写的是想要跨域的请求的位置,一般写在当前项目封装的请求文件夹里
            rarget:'http://api.xxxx.com',   //webpack把您的当前的localhost也好其他地址也好,代理成和您指定的target同源
            changeOrigin: true,   //原文说:Set the option `changeOrigin` to `true` for name-based virtual hosted sites,类似把您的地址和要请求的地址一起托管,这样您就能跨域访问了
            pathRewrite:{
            '^/api':''   //这里必须写,就是您的url在请求里面写地址的时候需要前面加上/api/,这个加上以后会被转换为空,可以不必担心,但是一定要写
          }
      }
  }

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

推荐阅读更多精彩内容

  • 写在最前面 一直都想在更新博客但是都因为懒放弃了,看了无问西东之后找了点正能量,更新起来 vue从出生到现在,从一...
    StevenTang阅读 5,834评论 2 9
  • 这是官网上一个最简单的例子 接下来我通过在chrome中一步步运行代码来理清其内部逻辑。首先当然是调用构造函数 然...
    丨ouo丨阅读 3,828评论 0 1
  • 每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM ...
    汶沐阅读 2,784评论 0 0
  • vue的生命周期如图所示: 它可以总共分为8个阶段:beforeCreate(创建前),created(创建后),...
    黄鹤你不是人阅读 4,938评论 0 0
  • 在开始正题之前,先来看一张网络上比较盛传的校招表格吧,标题名:年薪25万都是白菜价,感受感受人工智能下别人正在沐浴...
    昀魔方阅读 1,768评论 0 0