vue-cli webpack 开发环境跨域详解

 更新时间:2017年05月18日 10:10:16   作者:弗朗西斯科  
本篇文章主要介绍了vue-cli webpack 开发环境跨域详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

edit dev.proxyTable option in config/index.js. The dev server is using http-proxy-middleware for proxying

为了解决跨域问题,

  1. 通常会使用Jsonp,但是jsonp只能是get请求。
  2. 或者使用CORS支持,设置Access-Control-Allow-Origin: *

0 前置技能

熟悉vue-loader 和 webpack

 1 基本配置

编辑confix/index.js文件 dev server使用的是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': ''
    }
   }
  }
 }
}

The above example will proxy the request /api/posts/1 to http://jsonplaceholder.typicode.com/posts/1.

 2 全局匹配

you can provide a filter option that can be a custom function to determine whether a request should be proxied:

提供一个过滤器,制定路由规则和路由方法。

proxyTable: {
 '*': {
  target: 'http://jsonplaceholder.typicode.com',
  filter: function (pathname, req) {
   return pathname.match('^/api') && req.method === 'GET'
  }
 }
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • Vue使用localStorage存储数据的方法

    Vue使用localStorage存储数据的方法

    这篇文章主要为大家详细介绍了Vue使用localStorage存储数据的方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-05-05
  • vue双向数据绑定原理分析、vue2和vue3原理的不同点

    vue双向数据绑定原理分析、vue2和vue3原理的不同点

    这篇文章主要介绍了vue双向数据绑定原理分析、vue2和vue3原理的不同点,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • Vue中的情侣属性$dispatch和$broadcast详解

    Vue中的情侣属性$dispatch和$broadcast详解

    这篇文章主要给大家介绍了关于Vue中情侣属性$dispatch和$broadcast的相关资料,文中通过示例代码以及图文介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-03-03
  • vue.js中$set与数组更新方法

    vue.js中$set与数组更新方法

    下面小编就为大家分享一篇vue.js中$set与数组更新方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • Vue Router嵌套路由(children)的用法小结

    Vue Router嵌套路由(children)的用法小结

    嵌套路由就是父路由里面嵌套他的子路由,父路由有自己的路由导航和路由容器(router-link、router-view),通过配置children可实现多层嵌套,这篇文章主要介绍了Vue--Router--嵌套路由(children)的用法,需要的朋友可以参考下
    2022-08-08
  • 深入理解Vue官方文档梳理之全局API

    深入理解Vue官方文档梳理之全局API

    本篇文章主要介绍了深入理解Vue官方文档梳理之全局API,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • vue h5移动端禁止缩放代码

    vue h5移动端禁止缩放代码

    今天小编就为大家分享一篇vue h5移动端禁止缩放代码,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • 详解iview的checkbox多选框全选时校验问题

    详解iview的checkbox多选框全选时校验问题

    这篇文章主要介绍了详解iview的checkbox多选框全选时校验问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-06-06
  • vue在mounted中window.onresize不生效问题及解决

    vue在mounted中window.onresize不生效问题及解决

    这篇文章主要介绍了vue中在mounted中window.onresize不生效问题及解决,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-04-04
  • 用vue封装插件并发布到npm的方法步骤

    用vue封装插件并发布到npm的方法步骤

    本篇文章主要介绍了用vue封装插件并发布到npm的方法步骤,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-10-10

最新评论