NodeJS+Express遇到的跨域問題

項目描述

用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
（完）