Byte Ebi's Logo

Byte Ebi 🍤

每天一小口,蝦米變鯨魚

[Express+Vue 搭建電商網站] 05 - 連接 MongoDB 與 CORS

使用 Express + Vue 搭建一個電商網站 - 連接 MongoDB 與 CORS

Ray

資料庫使用 MongoDB,這篇中我們會簡單介紹基本連線方式,以及跨來源資源共(CORS)

連接 MongoDB

接著我們要安裝 mongoose 套件:Mongoose
Mongoose 是一個 MongoDB 對象建模工具,用於在異步環境中工作
是時下最流行的 ODM(Object Document Mapping),要比直接操作底層 MongoDB Node 更方便

npm install mongoose

接著回到 app.js 中導入剛剛安裝的 mongoose

const mongoose = require('mongoose')

並透過套件提供的方法連上我們的 MongoDB 資料庫

mongoose.connect(`mongodb://localhost:27017/test`);

雖然現在看不出效果,但我們等等會嘗試操作資料庫來測試連線的有效性
但現在我們先做點額外的事情,儘管目前看來沒什麼用處但卻是必要的一環
那就是開啟跨來源資源共用 CORS

跨來源資源共用 CORS

CORS 是基於 同源政策 的限制
當關閉時限制了程式碼和不同網域資源間的互動,來自不同網域的資源請求會被無情拒絕!

讓我們回到 app.js,在剛剛的資料庫連線下一行加入以下程式碼

// CORS config here
app.all('/*', function(req, res, next) {
  // CORS headers
  res.header("Access-Control-Allow-Origin", "*"); // restrict it to the required domain
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
  // Set custom headers for CORS
  res.header('Access-Control-Allow-Headers', 'Content-type,Accept,X-Access-Token,X-Key');
  if (req.method == 'OPTIONS') {
    res.status(200).end();
  } else {
    next();
  }
});

通常來說會使用 npm 套件 cors 解決,但這邊先用簡單暴力的方式解決
未來如果有進行優化會再回頭安裝


專案範例程式碼 GitHub 網址:ray247k/mini-E-commerce

最新文章

Category

Tag