[web] 建立本機 Proxy Server 繞過 CORS 錯誤

在本地端進行測試時,可以簡單建立本機 Proxy Server 來繞過 CORS 錯誤進行測試

前言


在前端串接 API 時最常遇到跨來源資源共用 (Cross-Origin Resource Sharing, CORS) 的阻礙,例如網站跑在 localhost:3000 上,而 mock api 跑在 localhost:8000 時,當網站呼叫 mock api server 時就會因違反同源政策被瀏覽器擋下,此時若 mock api server 是自己的就可以直接設置允許跨域訪問來解決這個問題,但有時候我們會想要接上測試環境的 api endpoint 進行實際資料驗證,此時就可以建立一個本機 Proxy Server 來欺騙瀏覽器,製造網站及 api endpoint 都是同源的假象。

 

 

使用 Node 建立 Local Proxy Server


最簡單的方式就是建立一個 Node Express 服務,透過 http-proxy-middleware 套件實現 Local Proxy。

$ mkdir proxy
$ cd proxy
$ npm init
$ npm install express http-proxy-middleware
$ touch app.js

 

假設目前有一個前端網站是在 http://localhost:3000/ ,然後呼叫的 api endpoint 是使用相對路徑 /api01 (http://localhost:3000/api01) 取得 mock api 資源;此時,當我們想要去測試實際環境 api endpoint (https://target.domain.com/boo) 時,可以在 app.js 中加入以下代碼並執行啟動 proxy ( node app.js )

// app.js

const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');

// Create Express Server
const app = express();

// Configuration
const PORT = 80;
const HOST = "localhost";

// 設定後端路由規則
// http://localhost/api01 -> https://target.domain.com/boo/api01
// http://localhost/api02 -> https://target.domain.com/boo/api02
app.use(['/api01', '/api02'], 
    createProxyMiddleware({ target: 'https://target.domain.com/boo', changeOrigin: true }));

// 設定前端路由規則
// http://localhost/others -> http://localhost:3000/others
app.use('/', 
    createProxyMiddleware({ target: 'http://localhost:3000', changeOrigin: true }));

// listen 80 port
app.listen(PORT)

 

 

實際測試


此時當我們訪問 http://localhost 站台並呼叫 API 時,會透過 proxy 轉導到正確位置:

  • 訪問網站: http://lcoalhost => proxy => http://localhost:3000
  • 呼叫 API: http://localhost/api01 => proxy => https://target.domain/boo/api10 (測試環境api來源)
兩者都在同源的狀態下,自然就不會有 CORS 狀況囉!

 

 

 

 

 

 

 

 

 

 


希望此篇文章可以幫助到需要的人

若內容有誤或有其他建議請不吝留言給筆者喔 !