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 相关文章推荐
通过身份证号得到出生日期和性别的js代码
Nov 23 Javascript
jquery控制select的text/value值为选中状态
Jun 03 Javascript
JavaScript中实现依赖注入的思路分享
Jan 15 Javascript
JavaScript Window浏览器对象模型方法与属性汇总
Apr 20 Javascript
jQuery插件制作之全局函数用法实例
Jun 01 Javascript
jQuery动画显示和隐藏效果实例演示(附demo源码下载)
Dec 31 Javascript
Angular中$cacheFactory的作用和用法实例详解
Aug 19 Javascript
AngularJS表单验证功能分析
May 26 Javascript
VUE使用vuex解决模块间传值问题的方法
Jun 01 Javascript
深入理解React中何时使用箭头函数
Aug 23 Javascript
JS插入排序简单理解与实现方法分析
Nov 25 Javascript
vue 实现锚点功能操作
Aug 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中计算中文字符串长度、截取中文字符串的函数代码
2011/08/09 PHP
PHP自动识别字符集并完成转码详解
2013/08/02 PHP
CodeIgniter上传图片成功的全部过程分享
2013/08/12 PHP
PHP取整函数:ceil,floor,round,intval的区别详细解析
2013/08/31 PHP
php使用CURL伪造IP和来源实例详解
2015/01/15 PHP
PHP图形操作之Jpgraph学习笔记
2015/12/25 PHP
jQuery 定时局部刷新(setInterval)
2010/11/19 Javascript
js控制input框只读实现示例
2014/01/20 Javascript
详解JavaScript的回调函数
2015/11/20 Javascript
jQuery操作css样式
2017/05/15 jQuery
JavaScript生成指定范围的时间列表
2018/03/19 Javascript
js实现购物车功能
2018/06/12 Javascript
JS数组求和的常用方法总结【5种方法】
2019/01/14 Javascript
react-native滑动吸顶效果的实现过程
2019/06/03 Javascript
vue draggable resizable gorkys与v-chart使用与总结
2019/09/05 Javascript
mpvue微信小程序开发之实现一个弹幕评论
2019/11/24 Javascript
简单了解JS打开url的方法
2020/02/21 Javascript
JavaScript中的this/call/apply/bind的使用及区别
2020/03/06 Javascript
js获取url页面id,也就是最后的数字文件名
2020/09/25 Javascript
JavaScript仿京东轮播图效果
2021/02/25 Javascript
[44:04]OG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python简明入门教程
2015/08/04 Python
python中requests和https使用简单示例
2018/01/18 Python
centos7之Python3.74安装教程
2019/08/15 Python
Python图像识别+KNN求解数独的实现
2020/11/13 Python
解决virtualenv -p python3 venv报错的问题
2021/02/05 Python
印度尼西亚综合购物网站:Lazada印尼
2016/09/07 全球购物
Geekbuying波兰:购买中国电子产品
2019/10/20 全球购物
CK加拿大官网:Calvin Klein加拿大
2020/03/14 全球购物
汽修专业学生自我鉴定
2013/11/16 职场文书
应届毕业生求职自荐书
2014/01/03 职场文书
2014年信用社工作总结
2014/11/25 职场文书
大学生简历自我评价2015
2015/03/03 职场文书
公司内部升职自荐信
2015/03/27 职场文书
Pytorch数据读取之Dataset和DataLoader知识总结
2021/05/23 Python
vue实现Toast组件轻提示
2022/04/10 Vue.js