NodeJS+Express遇到的跨域問題

老毛發表於2019-02-16
NodeJSExpress跨域

專案描述

用Express 搭建的服務開在http://localhost:3000/
前端webpack-dev-server 服務開在http://localhost:3001/

然後從前端頁面給後端介面傳送刪除和更新資料操作時報錯如下：

XMLHttpRequest cannot load http://localhost:3000/comments/597c4ef56fd60ba4ff6ec54f. Method DELETE is not allowed by Access-Control-Allow-Methods in preflight response.

概念描述

CORS是一個W3C標準，全稱是”跨域資源共享”（Cross-origin resource sharing）。
它允許瀏覽器向跨源伺服器，發出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制。
怎麼就算跨域了？
當一個資源從與該資源本身所在的伺服器不同的域或埠不同的域或不同的埠請求一個資源時，資源會發起一個跨域 HTTP 請求。
比如，站點 http://domain-a.com 的某 HTML 頁面通過 <img> 的 src 請求 http://domain-b.com/image.jpg。網路上的許多頁面都會載入來自不同域的CSS樣式表，影像和指令碼等資源。
詳細的描述戳這裡

解決方法

var express = require(`express`);
var app = express();
var router = express.Router();
var mongoose = require(`mongoose`);
var Comment = require(`./model/comments`);

//設定跨域訪問
app.all(`*`, function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By",` 3.2.1`)
    res.header("Content-Type", "application/json;charset=utf-8");
    next();
});

//Delete API
router.delete(`/comments/:comment_id`,function(req,res){

    Comment.remove({_id: req.params.comment_id},function(err,comment){
        if(err)
            res.send(err)
        res.json({ message: `Comment has been deleted`})
    })
})

app.use(`/`,router);

app.listen(3000);
console.log(`Listening on port 3000...`);

header中的配置含義戳這裡
這裡是用於cors的模組：Node.js CORS middleware
（完）

相關文章