一、使用http-proxy-middleware中介軟體解決跨域問題

本案例中使用基本的webpack及axios請求資料的外掛

• 1、後端服務是用tornado建立的一個服務(可以根據自己熟悉的搭建一個後端伺服器)

  ...
  class JsonHandler(tornado.web.RequestHandler):
      def get(self):
          li = [
              {"id": 0, "name": "張三", "age": 20},
              {"id": 1, "name": "李四", "age": 25},
              {"id"
   
  : 2, "name": "王五", "age": 27}
          ]
          self.write(json.dumps(li))
  
  ...

• 2、安裝包

  npm install http-proxy-middleware --save-dev
  npm install webpack --save-dev --save-dev
  npm install webpack-dev-server --save-dev
  npm install axios --save

• 3、webpack.config.js檔案

  var proxy = require('http-proxy-middleware'
   
  );
  module.exports = {
      entry:{
          index:'./index.js', 
      },
      output:{
          path:__dirname,
          filename:'[name].build.js',
      },
      module:{
          loaders:[]
      },
      resolve:{
          extensions:['.js',".css",".jsx"]
      },
      devServer: {
          proxy: {
            '/api': { // api表示當前專案請求的key
   
  
              target: 'http://xxxxxxxx:8000', // 代理伺服器路徑
              pathRewrite: {'^/api' : '/'}, // 重寫路徑
              changeOrigin: true
            }
          }
       }
  }

• 4、請求資料

  import axios from 'axios';
  var obtn = document.getElementById('btn');
  
  obtn.addEventListener('click',function(){
      axios.get('/api/json').then(res=>{
          console.log(res);
      })
  })