[Express+Vue 搭建電商網站] 05 - 連接 MongoDB 與 CORS
使用 Express + Vue 搭建一個電商網站 - 連接 MongoDB 與 CORS
資料庫使用 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
