http-proxy-middleware中间件解决前端开发中的跨域问题

Posted 2021-04-08 竿头日上

http-proxy-middleware中间件解决前端开发中的跨域问题

1. 安装依赖

   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

2. 配置webpack：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
             }
           }
        }
   }

3. 请求数据

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

4. 官网

   https://www.npmjs.com/package/http-proxy-middleware

5. express用法

   var express = require('express');
   var proxy = require('http-proxy-middleware');
   
   // proxy middleware options
   var options = {
       target: 'http://www.example.org', // target host
       changeOrigin: true,               // needed for virtual hosted sites
       ws: true,                         // proxy websockets
       pathRewrite: {
           '^/api/old-path' : '/api/new-path',     // rewrite path
           '^/api/remove/path' : '/path'           // remove base path
       },
       router: {
           // when request.headers.host == 'dev.localhost:3000',
           // override target 'http://www.example.org' to 'http://localhost:8000'
           'dev.localhost:3000' : 'http://localhost:8000'
       }
   };
   
   // create the proxy (without context)
   var exampleProxy = proxy(options);
   
   // mount `exampleProxy` in web server
   var app = express();
   app.use('/api', exampleProxy);
   app.listen(3000);