A brief discussion on cross-domain issues in webpack development

This article mainly introduces the solution to cross-domain problems in webpack development. The editor thinks it is quite good. Now I will share it with you and give you a reference. Let’s follow the editor and take a look.

This article introduces the solution to cross-domain problems in webpack development and shares it with everyone. The details are as follows:

1. Description

Webpack has built-in http-proxy-middleware which can solve the problem of requested URL proxy

2. API

requires proxy pathname To add /

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. Use

Note: The url used must start with / otherwise it will not be proxy to the specified address

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

The above is the detailed content of A brief discussion on cross-domain issues in webpack development. For more information, please follow other related articles on the PHP Chinese website!