搞搞就懂

前言

---

在前端串接 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 狀況囉！

 

 

 

 

 

 

 

 

 

 

---

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

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