{%hackmd sMV2zv-CTsuIqnpb0hZLmA %}

# 使用 Vercel服務運行 JSON Server

參考資源

*[Como colocar servidor json no vercel](https://www.youtube.com/watch?v=A--aYRbzKdU) -BiGOD*
*[json-server-vercel](https://github.com/kitloong/json-server-vercel) -kitloong*

#### 前言

目前正在學習 Vue，出一個電商網站的我，想在最後的作業製作屬於自己的作品。而課程提供的 API 無法滿足我的需求，所以我自作聰明的在本地端架設 JSON Server 來完成我的專案。好不容易完成作品後才發現，曾經免費的 Heroku 服務已經要收費了。在嘗試其他服務平台後，發現了一件嚴重的問題：CORS，這壞兄弟在我往前端道路上狠狠的糟蹋我。

### 壞兄弟CORS
CORS (Cross-Origin Resource Sharing) 是一個網路安全機制，用於網頁中經由 JavaScript 訪問來源不同的資源時，會發生跨域問題。同源策略 (Same-Origin Policy) 是一種網頁安全策略，它限制了不同源（即來源不同的網域）的網頁間的交互。

要解決 CORS 問題，可以在服務器端設置 HTTP 響應頭。當客戶端發出跨域請求時，服務器端需要在響應中添加 Access-Control-Allow-Origin 頭，並設置許可的來源，以授權客戶端跨域訪問。如果服務器端未設置這些頭部，瀏覽器會拒絕跨域請求，並在控制台顯示 CORS 相關的錯誤信息。

因此，在前端開發中，為了避免 CORS 問題，開發人員需要在服務器端設置相應的頭部，以允許客戶端的跨域訪問。在某些情況下，也可以使用代理或 JSONP 技術來解決跨域問題。

## 正文

首先前往 [json-server-vercel](https://github.com/kitloong/json-server-vercel)


使用此模板創建一個新的儲存庫


文件中的 db.json 就是你需要的資料內容


調整成你需要的內容


資料調整好後前往 [vercel](https://vercel.com/ )的官網
創建帳號
點擊 Add New 新建一個 Project


然後選擇你的github


點擊你新建的儲存庫
內容保持預設就好 點擊Depoly


等他跑好就完成了


再來點擊旁邊的Continue to Dashboard


DEPLOYMENT就是你需要的網址

getData() {
      let vm = this;
      axios
        .get(`https://js-server-*******-github.vercel.app/Commodity`)
        .then((response) => { })
        .catch((error) => console.log(error));
    },