NodeJS+Express遇到的跨域问题

DTeam 发布于2019-08-20 18:24 / 2280人阅读

摘要：它允许浏览器向跨源服务器，发出请求，从而克服了只能同源使用的限制。详细的描述戳这里解决方法设置跨域访问中的配置含义戳这里这里是用于的模块完

项目描述

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

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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