求教，前端跨域请求服务端方法，自己尝试的方法不起作用

Question

我现在的项目是使用 webpack + express 做前端开发环境

想通过代理解决跨域访问服务端接口

我尝试的使用的方法是http-proxy-middleware代理转发，
获取http://www.abc.com/（公网域名）下的数据接口，

本地请求：

$.ajax({
   method: "GET",
   url: 'api/baseData/getSections',
   data: {},
   success: function(data){
       console.log(data);
  }
})

请求后返回的是404，通过浏览器访问http://www.abc.com/baseData/g... 是没有问题的

本地项目启动的端口号是3000

dev-server.js 配置代码：

const base          = require('../config/webpack/base/base'),
      files         = require('../config/webpack/base/files'),
      webpackConfig = require('../config/webpack/webpack.dev'),
      proxy = require('http-proxy-middleware'),
      express       = require('express'),
      webpack       = require('webpack');

const app = express();
// Apply gzip compression
//const compress      = require('compression')
//app.use(compress());

/** -----------------------------------
 * Apply Webpack HMR Middleware
 * */
if (process.env.NODE_ENV === 'development') {
  const compiler = webpack(webpackConfig);
  
  app.use(require('webpack-dev-middleware')(compiler, {
    publicPath: files.cdnPath,
    quiet     : true,
    stats     : {colors: true}
  }));
  
  app.use(require('webpack-hot-middleware')(compiler));
    
    app.use('/', express.static(files.buildPath));
    
    app.use('/', express.static(files.staticPath));

  var middleWareMap = [
    proxy('/api', { target:'http://www.abc.com/' , changeOrigin: true }),
  ];

  app.use(middleWareMap);

  app.listen(base.devPort, () => {
    console.log(`open localhost:${base.devPort}`);
  });
}
else {
  console.log(
    `Server not being run of live development mode,
      Please use the NODE_ENV=development mode to run`
  );
}

module.exports = app;

上述问题查过一些资料，还是不得要领，不知道问题的根源在哪里

还有一个问题，服务端的测试环境访问地址是配置到一个内网ip中，通过host指向一个域名（比如http://www.17xueba.com）

能否通过上述的配置来获取服务端的测试环境数据，如何进行配置

Answer 1

粗略的看原因 不行留言
url: '/api/baseData/getSections' 把你的/加上

Answer 2

问题已解决

const base          = require('../config/webpack/base/base'),
      files         = require('../config/webpack/base/files'),
      webpackConfig = require('../config/webpack/webpack.dev'),
      proxy = require('http-proxy-middleware'),
      express       = require('express'),
      webpack       = require('webpack');

// const { HOST = 'http://www.qtv001.com/', PORT = '80' } = process.env;

const app = express();
// Apply gzip compression
//const compress      = require('compression')
//app.use(compress());

/** -----------------------------------
 * Apply Webpack HMR Middleware
 * */
if (process.env.NODE_ENV === 'development') {
  const compiler = webpack(webpackConfig);
  
  app.use(require('webpack-dev-middleware')(compiler, {
    publicPath: files.cdnPath,
    quiet     : true,
    stats     : {colors: true}
  }));
  
  app.use(require('webpack-hot-middleware')(compiler));
    
    app.use('/', express.static(files.buildPath));
    
    app.use('/', express.static(files.staticPath));

  app.use(['/baseData','/newCourse'], proxy({
      target: "http://www.abc.com",
      changeOrigin: true
  }));

  app.listen(base.devPort, () => {
    console.log(`open localhost:${base.devPort}`);
  });
}
else {
  console.log(
    `Server not being run of live development mode,
      Please use the NODE_ENV=development mode to run`
  );
}

module.exports = app;

修改部分为：
将以下代码删除

var middleWareMap = [
    proxy('/api', { target:'http://www.abc.com/' , changeOrigin: true }),
  ];

  app.use(middleWareMap);

替换为

app.use(['/baseData','/newCourse'], proxy({
      target: "http://www.abc.com",
      changeOrigin: true
  }));

出错原因，还是没有对文档仔细阅读造成的
因为请求地址没有/api后缀，因此请求了http://www.abc.com/api，然而服务器没有/api这个接口，索引返回了404错误