NodeJS+Express遇到的跨域問題

DTeam 發布于2019-08-20 18:24 / 2409人閱讀

摘要：它允許瀏覽器向跨源服務器，發出請求，從而克服了只能同源使用的限制。詳細的描述戳這里解決方法設置跨域訪問中的配置含義戳這里這里是用于的模塊完

項目描述

用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 頁面通過的 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
（完）

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/84453.html

九種 “姿勢” 讓你徹底解決跨域問題

摘要：什么是跨域當協議域名端口號，有一個或多個不同時，有希望可以訪問并獲取數據的現象稱為跨域訪問，同源策略限制下都是不支持跨域的。命名是隨意的，只要是符合一級域名與二級域名的關系即可，然后訪問。 showImg(https://segmentfault.com/img/remote/1460000018998493); 閱讀原文同源策略同源策略/SOP（Same origin pol...

charles_paul 2019-08-23 12:18 評論0 收藏0
You don't know cross-origin

摘要：為什么會存在跨域問題同源策略由于出于安全考慮，瀏覽器規定不能操作其他域下的頁面，不能接受其他域下的請求不只是，引用非同域下的字體文件，還有引用非同域下的圖片，也被同源策略所約束只要協議域名端口有一者不同，就被視為非同域。 showImg(https://segmentfault.com/img/remote/1460000017093859?w=1115&h=366); Why 為什么...

hersion 2019-08-26 13:25 評論0 收藏0
那些年曾談起的跨域

摘要：在中，在不同的域名下面進行數據交互，就會遇到跨域問題，說到跨域首先要從同源說起，瀏覽器為了提供一種安全的運行環境，各個瀏覽器廠商協定使用同源策略。在上面說過是不受同源策略限制的，但是出于安全原因，瀏覽器限制從腳本內發起的跨源請求。對于前端開發來說跨域應該是最不陌生的問題了，無論是開發過程中還是在面試過程中都是一個經常遇到的一個問題，在開發過程中遇到這個問題的話一般都是找后端同學去解決...

galois 2019-08-23 18:13 評論0 收藏0
前端常見跨域解決方案（全）

摘要：需注意的是由于同源策略的限制，所讀取的為跨域請求接口所在域的，而非當前頁。目前，所有瀏覽器都支持該功能需要使用對象來支持，也已經成為主流的跨域解決方案。反向代理接口跨域跨域原理同源策略是瀏覽器的安全策略，不是協議的一部分。什么是跨域？跨域是指一個域下的文檔或腳本試圖去請求另一個域下的資源，這里跨域是廣義的。廣義的跨域： 1.) 資源跳轉： A鏈接、重定向、表單提交 2.) 資源...

canger 2019-07-25 15:04 評論0 收藏0
理解跨域及常用解決方案

摘要：跨域的產生不用多講，作為一名前端開發人員，相信大家都知道跨域是因為瀏覽器的同源策略所導致的。瀏覽器引入同源策略主要是為了防止，攻擊。其指明了實際請求所允許使用的方法。跨域，相信大家無論是在工作中還是在面試中經常遇到這個問題，常常在網上看到別人所整理的一些方法，看似知道是怎么回事，但如果沒有動手實踐過，總覺得自己沒有真正的掌握，在這里，通過自己認真思考整理一些常用的方法。跨域的產生 ...

paney129 2019-08-23 13:57 評論0 收藏0