webpack开发跨域问题解决办法

 更新时间:2017年08月03日 11:02:57   作者:mjzhang1993  
本篇文章主要介绍了webpack开发跨域问题解决办法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

本文介绍了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学习点滴 call、apply的区别

    JavaScript学习点滴 call、apply的区别

    对于apply和call两者在作用上是相同的,但两者在参数上有区别的。
    2010-10-10
  • TypeScript 映射类型详情

    TypeScript 映射类型详情

    这篇文章主要介绍了TypeScript 映射类型详情,一个类型需要基于另外一个类型, 又不想拷贝一份,这个时候可以考虑使用映射类型,映射类型建立在索引签名的语法上,下面文章我们就从回顾下索引签名展开TypeScript 映射类型的相关资料,需要的朋友可以参考一下
    2021-12-12
  • js实现图片淡入淡出切换简易效果

    js实现图片淡入淡出切换简易效果

    这篇文章主要为大家详细介绍了js实现图片淡入淡出切换简易效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • 史上最为详细的javascript继承(推荐)

    史上最为详细的javascript继承(推荐)

    这篇文章主要介绍了javascript继承,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-05-05
  • js实现表单校验功能

    js实现表单校验功能

    这篇文章主要为大家详细介绍了js实现表单校验功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • JS禁用页面上所有控件的实现方法(附demo源码下载)

    JS禁用页面上所有控件的实现方法(附demo源码下载)

    这篇文章主要介绍了JS禁用页面上所有控件的方法,涉及JavaScript捕捉页面元素的相关技巧,并附带demo源码供读者下载参考,需要的朋友可以参考下
    2015-12-12
  • js模式化窗口问题![window.dialogArguments]

    js模式化窗口问题![window.dialogArguments]

    这篇文章主要介绍了js模式化窗口问题![window.dialogArguments],需要的朋友可以参考下
    2016-10-10
  • js密码强度检测

    js密码强度检测

    这篇文章主要介绍了js密码强度检测的相关资料,并给出了详细代码,需要的朋友可以参考下
    2016-01-01
  • JavaScript的递归之递归与循环示例介绍

    JavaScript的递归之递归与循环示例介绍

    对于不同类型的需要重复计算的问题,循环和递归两种方法各有所长,能给出更直观简单的方案,下面为大家详细的介绍下JavaScript的递归与循环,感兴趣的朋友可以了解下
    2013-08-08
  • javascript 兼容各个浏览器的事件

    javascript 兼容各个浏览器的事件

    这篇文章主要介绍了javascript 兼容各个浏览器的事件,需要的朋友可以参考下
    2015-02-02

最新评论