• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com专业计算机教程网站
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure
您的位置:首页 > 网页设计 >vue > vue-cli webpack 开发环境跨域详解

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

作者:弗朗西斯科 字体:[增加 减小] 来源:互联网 时间:2017-05-30

本文主要包含webpack 跨域,webpack详解,webpack开发,webpack 开发工具,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': ''
    }
   }
  }
 }
}
</div>

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'
  }
 }
}
</div>

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

</div>

您可能想查找下面的文章:

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

相关文章

  • 2017-05-30vue-router跳转页面的方法
  • 2017-05-30vue构建单页面应用实战
  • 2017-05-30Vue.js绑定HTML class数组语法错误的原因分析
  • 2017-05-30详解Vue方法与事件
  • 2017-05-30vue实现可增删查改的成绩单
  • 2017-05-30vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
  • 2017-05-30Vuejs第七篇之Vuejs过渡动画案例全面解析
  • 2017-05-30详解vue.js组件化开发实践
  • 2017-05-30vue中用动态组件实现选项卡切换效果
  • 2017-05-30vue日期组件 支持vue1.0和2.0

文章分类

  • html/xhtml
  • html5
  • CSS
  • XML/XSLT
  • Dreamweaver教程
  • Frontpage教程
  • 心得技巧
  • bootstrap
  • vue
  • AngularJS
  • HBuilder教程
  • css3
  • 浏览器兼容
  • div/css
  • 网页编辑器
  • axure

最近更新的内容

    • Vue.js快速入门教程
    • 使用vue实现点击按钮滑出面板的实现代码
    • vue如何实现observer和watcher源码解析
    • 探究Vue.js 2.0新增的虚拟DOM
    • vue学习笔记之vue1.0和vue2.0的区别介绍
    • vue+element的tree组件学习模板
    • axios基本用法
    • Vue2.0利用 v-model 实现组件props双向绑定的优美解决方案
    • Vue.js:使用Vue-Router 2实现路由功能介绍
    • Vue服务端渲染和Vue浏览器端渲染的性能对比(实例PK )

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有