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);
  })

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

您可能感兴趣的文章:

相关文章

  • js判断一点是否在一个三角形内

    js判断一点是否在一个三角形内

    判断一个点是否在一个三角行内的代码
    2008-02-02
  • JavaScript实现绘制两个坐标之间的连线

    JavaScript实现绘制两个坐标之间的连线

    本文主要介绍了JavaScript实现绘制两个坐标之间的连线功能,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-11-11
  • Webpack打包时将文件内联方法实现

    Webpack打包时将文件内联方法实现

    本文主要介绍了Webpack打包时将文件内联方法实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2023-01-01
  • 去掉gridPanel表头全选框的小例子

    去掉gridPanel表头全选框的小例子

    这篇文章介绍了去掉gridPanel表头全选框的小例子,有需要的朋友可以参考一下
    2013-07-07
  • javascript自定义右键菜单插件

    javascript自定义右键菜单插件

    这篇文章主要为大家详细介绍了javascript自定义右键菜单插件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-12-12
  • 代码整洁之道(重构)

    代码整洁之道(重构)

    这篇文章主要介绍了代码整洁之道(重构),不管对于何种语言,重构都是软件开发过程中不可或缺的一部分,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-10-10
  • javascript使用call调用微信API

    javascript使用call调用微信API

    这篇文章主要介绍了javascript使用call调用微信API,需要的朋友可以参考下
    2014-12-12
  • JS正则表达式之非捕获分组用法实例分析

    JS正则表达式之非捕获分组用法实例分析

    这篇文章主要介绍了JS正则表达式之非捕获分组用法,结合实例形式详细分析了正则表达式中非捕获分组的概念、功能、使用方法与相关注意事项,需要的朋友可以参考下
    2016-12-12
  • jsonp实现百度下拉框功能的方法分析

    jsonp实现百度下拉框功能的方法分析

    这篇文章主要介绍了jsonp实现百度下拉框功能的方法,结合实例形式分析了调用百度接口jsonp实现跨域请求及内容渲染相关操作技巧,需要的朋友可以参考下
    2019-05-05
  • DOM操作一些常用的属性汇总

    DOM操作一些常用的属性汇总

    这篇文章主要介绍了DOM操作一些常用的属性汇总,总结的相当全面,附上示例,是篇非常不错的学习提高DOM操作的文章,推荐给大家。
    2015-03-03

最新评论