鍍金池/ 問(wèn)答/HTML/ 求教，前端跨域請(qǐng)求服務(wù)端方法，自己嘗試的方法不起作用

求教，前端跨域請(qǐng)求服務(wù)端方法，自己嘗試的方法不起作用

我現(xiàn)在的項(xiàng)目是使用 webpack + express 做前端開發(fā)環(huán)境

想通過(guò)代理解決跨域訪問(wèn)服務(wù)端接口

我嘗試的使用的方法是http-proxy-middleware代理轉(zhuǎn)發(fā)，
獲取http://www.abc.com/（公網(wǎng)域名）下的數(shù)據(jù)接口，

本地請(qǐng)求：

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

請(qǐng)求后返回的是404，通過(guò)瀏覽器訪問(wèn)http://www.abc.com/baseData/g... 是沒有問(wèn)題的

本地項(xiàng)目啟動(dòng)的端口號(hào)是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;

上述問(wèn)題查過(guò)一些資料，還是不得要領(lǐng)，不知道問(wèn)題的根源在哪里

還有一個(gè)問(wèn)題，服務(wù)端的測(cè)試環(huán)境訪問(wèn)地址是配置到一個(gè)內(nèi)網(wǎng)ip中，通過(guò)host指向一個(gè)域名（比如http://www.17xueba.com）

能否通過(guò)上述的配置來(lái)獲取服務(wù)端的測(cè)試環(huán)境數(shù)據(jù)，如何進(jìn)行配置

回答
編輯回答
熊出沒

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

2017年1月31日 23:18
編輯回答
拼未來(lái)

問(wèn)題已解決

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

出錯(cuò)原因，還是沒有對(duì)文檔仔細(xì)閱讀造成的
因?yàn)檎?qǐng)求地址沒有/api后綴，因此請(qǐng)求了http://www.abc.com/api，然而服務(wù)器沒有/api這個(gè)接口，索引返回了404錯(cuò)誤

2017年2月2日 06:39