---
# System prepended metadata

title: 使用 Vercel服務運行 JSON Server

---

{%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，這壞兄弟在我往前端道路上狠狠的糟蹋我。
![](https://hackmd.io/_uploads/rkb_cwqE2.png =10%x)![](https://hackmd.io/_uploads/HyzOqwqVn.png =10%x)![](https://hackmd.io/_uploads/r1rOcw9V2.png =10%x)![](https://hackmd.io/_uploads/ryLucwqN3.png =10%x)![](https://hackmd.io/_uploads/ryF_qvcN3.png =10%x)



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

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

因此，在前端開發中，為了避免 CORS 問題，開發人員需要在服務器端設置相應的頭部，以允許客戶端的跨域訪問。在某些情況下，也可以使用代理或 JSONP 技術來解決跨域問題。
![](https://hackmd.io/_uploads/SkI-jw5Nh.png =25%x)

## 正文

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

![](https://hackmd.io/_uploads/B1iXsP9E3.png =50%x)

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

![](https://hackmd.io/_uploads/HJNriwqN2.png =50%x)

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

![](https://hackmd.io/_uploads/BJNtjwqEh.png =50%x)

調整成你需要的內容

![](https://hackmd.io/_uploads/r1gnsPcEh.png =50%x)

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

![](https://hackmd.io/_uploads/BJDJ3Dc43.png =50%x) 

然後選擇你的github

![](https://hackmd.io/_uploads/HkighPcE3.png =50%x)

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

![](https://hackmd.io/_uploads/ByUm3P9E3.png =50%x)

等他跑好就完成了

![](https://hackmd.io/_uploads/SkBJdwq42.png =50%x)

再來點擊旁邊的Continue to Dashboard

![](https://hackmd.io/_uploads/r1XMKv9E2.png =50%x)


DEPLOYMENT就是你需要的網址

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