http-proxy-middleware

用於把請求代理轉發到其他伺服器的中介軟體。解決開發過程中的跨域問題

簡介

例如：我們當前主機為：http://localhost:3000/，後臺介面資料所在伺服器為：http://api.xxx.com。

如何在本機訪問伺服器資料？程式碼如下：

var express = require('express');
var proxy = require('http-proxy-middleware');

var app = express();

app.use('/api', proxy({target: 'http://api.xxx.com', changeOrigin: true}));
app.listen(3000);
 

• express在3000埠啟動了的服務，
• 利用了app.use('/api', proxy({ target: 'http://api.xxx.com', changeOrigin: true })); 使發到localhost: 3000的 / api下的請求轉發到了http://api.xxx.com。
• 即請求http://localhost:3000/api 相當於請求 http://api.xxx.com/api

vue-cli中配置

1、安裝外掛

$ npm install --save-dev http-proxy-middleware

2、示例程式碼：

// 引用依賴 
var express = require('express'); 
var proxy = require('http-proxy-middleware'); 
// proxy 中介軟體的選擇項 
var options = { 
    target: 'http://www.example.org', // 目標伺服器 host 
    changeOrigin: true, // 預設false，是否需要改變原始主機頭為目標URL 
    ws: true, // 是否代理websockets 
    pathRewrite: {
        '^/api/old-path' : '/api/new-path', // 重寫請求，比如我們源訪問的是api/old-path，那麼請求會被解析為/api/new-path 
        '^/api/remove/path' : '/path' // 同上 
    }, 
    router: { 
        // 如果請求主機 == 'dev.localhost:3000', 
        // 重寫目標伺服器 'http://www.example.org' 為 'http://localhost:8000' 
        'dev.localhost:3000' : 'http://localhost:8000' 
    } 
}; 
// 建立代理 
var exampleProxy = proxy(options); 
// 使用代理 
var app = express(); 
app.use('/api', exampleProxy); 
app.listen(3000);