webpack开发跨域问题解决办法


Posted in Javascript onAugust 03, 2017

本文介绍了webpack开发跨域问题解决办法,分享给大家,具体如下:

1. 说明

webpack 内置了 http-proxy-middleware 可以解决 请求的 URL 代理的问题

2. API

需要代理的 pathname 要加 /

module.exports = {
  devtool: 'cheap-module-source-map',
  entry: './app/js/index.js'
  output: {
    path: path.resolve(__dirname, 'dev'),
    // 所有输出文件的目标路径
    filename: 'js/bundle.js',
    publicPath: '/',
    chunkFilename: '[name].chunk.js'
  },
  devServer: {
    contentBase: path.resolve(__dirname, 'dev'),
    publicPath: '/',
    historyApiFallback: true,
    proxy: {
      // 请求到 '/device' 下 的请求都会被代理到 target: http://debug.xxx.com 中
      '/device/*': { 
        target: 'http://debug.xxx.com',
        secure: false, // 接受 运行在 https 上的服务
        changeOrigin: true
      }
    }
  }
}

3. 使用

注:使用的url 必须以/开始 否则不会代理到指定地址

fetch('/device/space').then(res => {
    // 被代理到 http://debug.xxx.com/device/space
    return res.json();
  }).then(res => {
    console.log(res);
  })

  fetch('device/space').then(res => {
    // http://localhost:8080/device/space 访问本地服务
    return res.json();
  }).then(res => {
    console.log(res);
  })

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

Javascript 相关文章推荐
基于jquery的弹出提示框始终处于窗口的居中位置(类似于alert弹出框的效果)
Sep 28 Javascript
JS调试必备的5个debug技巧
Mar 07 Javascript
jQuery ajax serialize() 方法使用示例
Nov 02 Javascript
node+express+ejs制作简单页面上手指南
Nov 26 Javascript
javascript常见数据验证插件大全
Aug 03 Javascript
js中获取键盘事件的简单实现方法
Oct 10 Javascript
Angular2利用组件与指令实现图片轮播组件
Mar 27 Javascript
微信小程序webview实现长按点击识别二维码功能示例
Jan 24 Javascript
微信小程序设置全局请求URL及封装wx.request请求操作示例
Apr 02 Javascript
vue-router 前端路由之路由传值的方式详解
Apr 30 Javascript
微信小程序结合Storage实现搜索历史效果
May 18 Javascript
JavaScript变量作用域及内存问题实例分析
Jun 10 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
Aug 03 #Javascript
react-native ListView下拉刷新上拉加载实现代码
Aug 03 #Javascript
解决ionic和angular上拉加载的问题
Aug 03 #Javascript
ES6学习教程之Map的常用方法总结
Aug 03 #Javascript
微信小程序之电影影评小程序制作代码
Aug 03 #Javascript
Form表单上传文件(type="file")的使用
Aug 03 #Javascript
微信小程序-滚动消息通知的实例代码
Aug 03 #Javascript
You might like
PHP中的string类型使用说明
2010/07/27 PHP
理解PHP中的stdClass类
2014/04/18 PHP
PHP 二维数组和三维数组的过滤
2016/03/16 PHP
PHP数组生成XML格式数据的封装类实例
2016/11/10 PHP
Laravel中错误与异常处理的用法示例
2018/09/16 PHP
PHP获取星期几的常用方法小结
2018/12/18 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
动态表格Table类的实现
2009/08/26 Javascript
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
2010/01/22 Javascript
js change,propertychange,input事件小议
2011/12/20 Javascript
JS中toFixed()方法引起的问题如何解决
2012/11/20 Javascript
AngularJS语法详解(续)
2015/01/23 Javascript
jQuery设置和移除文本框默认值的方法
2015/03/09 Javascript
Javascript中typeof 用法小结
2015/05/12 Javascript
javascript连续赋值问题
2015/07/08 Javascript
AngularJS 使用 UI Router 实现表单向导
2016/01/29 Javascript
js 奇葩技巧之隐藏代码
2017/08/11 Javascript
vue实现鼠标移入移出事件代码实例
2019/03/27 Javascript
Koa 中的错误处理解析
2019/04/09 Javascript
javascript面向对象三大特征之封装实例详解
2019/07/24 Javascript
python读取csv文件示例(python操作csv)
2014/03/11 Python
Python中使用socket发送HTTP请求数据接收不完整问题解决方法
2015/02/04 Python
Python3中的列表,元组,字典,字符串相关知识小结
2017/11/10 Python
2018年Python值得关注的开源库、工具和开发者(总结篇)
2018/01/04 Python
python 读取文件并替换字段的实例
2018/07/12 Python
python3.6.3安装图文教程 TensorFlow安装配置方法
2020/06/24 Python
Django CBV模型源码运行流程详解
2020/08/17 Python
python 获取字典特定值对应的键的实现
2020/09/29 Python
css3背景_动力节点Java学院整理
2017/07/11 HTML / CSS
校领导推荐信
2013/11/01 职场文书
工商管理专业自荐信
2014/06/03 职场文书
商铺门面租房协议书
2014/10/21 职场文书
2015年感恩母亲节活动方案
2015/05/04 职场文书
2015中秋节晚会开场白
2015/07/30 职场文书
创业计划书之健康营养产业
2019/10/15 职场文书
Java网络编程之UDP实现原理解析
2021/09/04 Java/Android