1. 程式人生 > >利用express中介軟體http-proxy-middleware代理前端跨域請求(包含get和post)

利用express中介軟體http-proxy-middleware代理前端跨域請求(包含get和post)

1,建立app.js

var express = require('express');
var path = require('path');
var favicon = require('serve-favicon');
var logger = require('morgan');
var cookieParser = require('cookie-parser');
var bodyParser = require('body-parser');
// 代理外掛
var proxy = require('http-proxy-middleware');
// 跨域外掛
var cors = require('cors');


var app = express();
app.use(cors());


app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');


app.use(logger('dev'));
app.use(bodyParser.urlencoded({
    extended: true
}));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'static')));
// 設定代理
app.use('/jygoods-api', proxy({
    target: 'https://m.jyall.com',
    changeOrigin: true
}));
app.use(function(req, res, next) {
    var err = new Error('Not Found');
    err.status = 404;
    next(err);
});


// error handler
app.use(function(err, req, res, next) {
    res.locals.message = err.message;
    res.locals.error = req
        .app
        .get('env') === 'development' ?
        err : {};


    // render the error page
    res.status(err.status || 500);
    res.render('error');
});
app.listen(4000, function() {
    console.log('http://localhost:4000')

});

2,和app.js建立static靜態資源存放目錄

3,cnpm 安裝相關依賴

4,node啟動app.js

http://localhost:4000/jygoods-api*** 請求被代理到 https://m.jyall.com/jygoods-api*** 

補充一個package.json的內容,npm install 直接就可以使用

{
  "dependencies": {
    "atob": "^2.1.1",
    "body-parser": "^1.18.3",
    "cookie-parser": "^1.4.3",
    "cors": "^2.8.4",
    "decode-uri-component": "^0.2.0",
    "express": "^4.16.3",
    "http-proxy-middleware": "^0.18.0",
    "morgan": "^1.9.0",
    "path": "^0.12.7",
    "serve-favicon": "^2.5.0",
    "source-map-resolve": "^0.5.2",
    "source-map-url": "^0.4.0",
    "urix": "^0.1.0"
  }
}

相關推薦

利用express中介軟體http-proxy-middleware代理前端請求(包含getpost)

1,建立app.js var express = require('express'); var path = require('path'); var favicon = require('serve-favicon'); var logger = require('mo

node express 中介軟體 http-proxy-middleware express-http-proxy 轉發 搞定 post 超時

2018-11-14 總結: http-proxy-middleware 轉發 post 請求 有問題,沒找到問題所在,換 express-http-proxy 代理。 前後端獨立開發,靜態檔案、模板等 前端express服務提供。後端負責介面。前端開發 轉發 ajax 到 測試伺服器或者開發伺服器。

關於vue2.x使用axios以及http-proxy-middleware代理處理的問題

axios現在以及是尤大大推薦使用的了,官方不在維護vue-reresource. 由於是地第一次使用axios, 在使用過程中猜了很大的坑 首先我們使用vue-cli建立的專案, 訪問介面肯定是跨域了, 因為我們的本地服務預設的地址一般是localhost

運用 node + express + http-proxy-middleware 實現前端代理的 詳細實例哦

管理工具 and 訪問 ext pub 文件夾 破解 next() 包管理 一、你需要準備的知識儲備 運用node的包管理工具npm 安裝插件、中間件的基本知識; 2.express框架的一些基礎知識,知道如何建立一個小的服務器;曉得如何快速的搭建一個express框架小

vue 使用 http-proxy-middleware 代理解決(專案使用vue-cli腳手架搭建)

使用http-proxy-middleware 代理解決(專案使用vue-cli腳手架搭建) 開啟config/index.js,在proxyTable中添寫如下程式碼: proxyTable: { '/api': { //使用"/a

使用http-proxy-middleware 代理

serve targe tro url axios pro .cn config tar 使用http-proxy-middleware 代理跨域 例如請求的url:“http://f.apiplus.cn/bj11x5.json” 1、打開co

利用express+node 建立本地伺服器並利用node代理處理請求

第一步 下載安裝node.js 第二步 初始化資料夾 命令: npm init 然後一路回車 第三步 安裝express,ejs, request, npm instal

使用http-proxy-middleware解決前端開發中的問題

一、使用http-proxy-middleware中介軟體解決跨域問題 本案例中使用基本的webpack及axios請求資料的外掛 1、後端服務是用tornado建立的一個服務(可以根據自

利用Telnet來模擬Http請求GETPOST兩種

利用Telnet來模擬Http請求---訪問百度。       1、開啟"執行"->cmd進入命令環境;       2、輸入"telnet www.baidu.com 80",回車後 ,螢幕為全黑,此時我們利用快捷鍵"Ctrl+](右中括號)"來開啟本地回顯功能,這

C/C++使用libcurl庫發送http請求getpost可以用於請求html信息,也可以請求xmljson等串)

網絡連接 get 編譯 eas views vs2015 return tar linux C++要實現http網絡連接,需要借助第三方庫,libcurl使用起來還是很方便的 環境:win32 + vs2015 如果要在Linux下使用,基本同理 1,下載

vue-cli項目本地代理實現請求

con 跨域 請求 AR url 本地 dex ams gin   使用 Vue-cli 創建的項目,開發地址是 localhost:8080,需要訪問非本機上的接口http://10.1.0.34:8000/queryRole。不同域名之間的訪問,需要跨域才能正確請求。跨

HTTP請求getpost的區別是什麽

信息 兩種 緩存 數據 request 取數 安全性 body 數據類型 GET和POST是Http請求中最常用的兩種請求方法 首先介紹GET與POST的差異:   (1)GET請求資源數據,POST向服務器傳遞需要處理的數據   (2)GET傳遞數據大小不超過2kb,PO

【nginx學習】nginx反向代理前端問題

本地ip name str host jsonp 註意 access origin 跨域問題 * 跨域簡介: 跨域是指a頁面想獲取b頁面資源,如果a、b頁面的協議、域名、端口、子域名不同,所進行的訪問行動都是跨域的,而瀏覽器為了安全問題一般都限制了跨域訪問,也就是不允許跨域

雜談——HTTP的兩種請求GETPOST的作用、區別與本質

當面試的時候,考官問你:GET和POST的作用是什麼,它們又有什麼區別呢 這時候你該如何回答呢? 且讓我們來理一理思緒~ 開始入手web專案的夥伴們基本上都開始使用GET和POST請求了,那這兩種請求到底是什麼東西呢,它又有什麼作用? 今天我們來細細瞭解一下。GET和POST作

Vue前端服務代理實現請求資料。

開發中請求真實伺服器資料,配置伺服器代理實現跨域。 vue-cli + webpack 構建的專案 再 ./config/index.js 檔案中配置 proxyTable: { '/api':{ target: 'http://請求的伺服器地址',

HTTP請求方式GETPOST的區別詳解

HTTP有兩部分組成:請求與響應,下面分別整理。 一.HTTP請求 1.HTTP請求格式: <request line> <headers> <blank line> [<request-body>] 在HTTP請

Nginx:反向代理實現請求

如今,RestFul介面服務比較流行,應用通過一套Http的API,並用json或者xml作為互動的資料格式來提供服務。這麼做有效地實現了web專案,前後端的分離。從而使得架構更加開放,這套API可以同時給多套前端專案提供服務,包括web端和APP端。 什麼是跨域? 跨域

HTTP 請求Get Post 區別

一、原理區別 一般我們在瀏覽器輸入一個網址訪問網站都是GET請求;再FORM表單中,可以通過設定Method指定提交方式為GET或者POST提交方式,預設為GET提交方式。 HTTP定義了與伺服器互動的不同方法,其中最基本的四種:GET,POST,PUT,DELETE,H

HTTP請求GETPOST的分析

近期一位朋友想寫iOS上的應用,打算從微博應用做起,第一步先做一個微部落格戶端出來,然後做一個手機微博應用出來,具體做什麼還不甚清楚,其實是在嘗試中。而我正好在用asio寫網路庫,於是主動提出了承擔web伺服器網路庫的部分,也是為了給我自己封裝的網路庫中增加一個http模組。http大家都不陌生,每天開啟網頁

Vue前端配置代理實現請求

跨域的解決方法:         *設定讓伺服器允許跨域         *前端配置代理實現跨域請求 本文介紹前端配置代理實現跨域請求:  在專案config資料