源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

webpack开发跨域问题解决办法

  • 时间:2022-05-03 14:24 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:webpack开发跨域问题解决办法
本文介绍了webpack开发跨域问题解决办法,分享给大家,具体如下: [b]1. 说明[/b] webpack 内置了 http-proxy-middleware 可以解决 请求的 URL 代理的问题 [b]2. API[/b] 需要代理的 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);
  })

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程素材网。
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部