用express实现CORS跨域(上-简单请求)
今天遇到了一个跨域请求登录验证的问题。所以有了尝试跨域的机会。
具体情景是，有一个登录界面写在名叫cas的站点上，但是相关的登录验证的后台接口是写在名叫earth的站点。
首先的反应是使用jsonp，但是jsonp只能get请求，而且一旦跨域会有权限问题（这个下面会说），更主要的是jsonp那种类似hack的写法总让我觉得别扭。当然最主要的是后台用stringMVC已经实现了CORS。
CORS是一种跨域资源共享的方式，和ajax实际上是没什么区别的，相对应的RESTFUL方法们都是可以的，实现方式上是有区别的。
这次就先总结下比较简单的，用GET发一个邮箱地址，让后台验证这个邮箱是否可用，返回true或者false。
首先先写一个客户端，这个客户端是用webstorm默认的方式起的，域名应该是localhost：63342
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<button id="cors">send cors</button>
</body>
<script>
var cors=document.querySelector('#cors');
cors.onclick=function () {
var xhr=new XMLHttpRequest();
xhr.open('GET','http://localhost:3001/getName',true);
xhr.withCredentials=true;
xhr.onload=function (data) {
console.log(data);
};
xhr.send(null);
}
</script>
</html>
这个页面就是点击一个按钮向3001端口发送一个GET请求，可以看到除了xhr.withCredentials=true;以外和ajax没什么区别，CORS基本上就是个服务端技术。另外提一句，在高程三上说需要在请求头上写一句Origin:XXXX来告诉服务端你的源信息，但是实际上我测试的时候发现即使不写，浏览器也会自动把这句加到请求头里。
var express=require('express');
var url=require('url');
var app=express();
var allowCrossDomain = function(req, res, next) {
res.header('Access-Control-Allow-Origin', 'http://localhost:63342');
res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
res.header('Access-Control-Allow-Headers', 'Content-Type');
res.header('Access-Control-Allow-Credentials','true');
next();
};
app.use(allowCrossDomain);
app.get('/checkEmail',function (req,res,next) {
var queryValue=url.parse(req.url).query;
if(queryValue==='fortunewheel@sina.com'){
res.send(true);
}else {
res.send(false);
}
});
app.listen(3001);
可以看到比较明显的区别就是多了一个allowCrossDomain的中间件，这个中间件的作用就是向响应头里写一些东西。
为什么是响应头？下面是我的一点理解，不对欢迎指正：
跨域请求需要做处理的原因是同源策略，即协议、域名和端口必须完全相同才能发起请求。而同源策略实际上是浏览器行为，因为不做限制的跨域是比较危险的，所以各个浏览器都会做跨域限制。对于CORS会向服务端发送一个预请求，服务端写回响应头。浏览器发现预请求的响应头是允许自己发送请求的才会发送真正的请求。
下面这一句就是告诉什么站点是被允许的
res.header('Access-Control-Allow-Origin', 'http://localhost:63342');
浏览器就会知道服务器是允许这个站点进行跨域访问的。其实，这就是一个白名单机制。
其他的三条是什么意思百度下就好。稍微提一句，建议在客户端写上xhr.withCredentials=true; 对应的服务端也要加上对应的响应头。不过这样写，Access-Control-Allow-Origin就不能写*来允许所有站点请求，在实际工程上也很少允许所有站点。而这也是jsonp不好的地方，如果向设定请求权限要考虑使用其他方法，不如CORS简便。
当然，上面说的都是简单请求的CORS。HEAD GET POST方法下，使用某些请求头（嗯，传个json是肯定没问题）都是简单请求。
复杂请求的机制和简单请求不太一样，有空写写个下篇详细说明下。
用express实现CORS跨域(上-简单请求)的更多相关文章
- nodejs（15）express开启cors跨域
express开启cors跨域 package.json "dependencies": { "body-parser": "^1.18.3" ...
- express和cors跨域
使用express框架: Express: Express 是一个保持最小规模的灵活的 Node.js Web 应用程序开发框架,为 Web 和移动应用程序提供一组强大的功能. Express 框架核 ...
- django上课笔记7-jQuery Ajax 和 原生Ajax-伪造的Ajax-三种Ajax上传文件方法-JSONP和CORS跨域资源共享
一.jQuery Ajax 和 原生Ajax from django.conf.urls import url from django.contrib import admin from app01 ...
- 4 伪ajax：jsonp、cors 跨域请求
一.同源策略 https://www.cnblogs.com/yuanchenqi/articles/7638956.html 同源策略(Same origin policy)是一种约定,它是浏览器最 ...
- 同源策略与CORS跨域请求
一.同源策略 1.简介 同源策略(Same origin policy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说Web是构建在同源 ...
- 浏览器的同源策略及CORS跨域解决方案 DRF
一个源的定义 如果两个页面的协议,端口(如果有指定)和域名都相同,则两个页面具有相同的源. 举个例子: 下表给出了相对http://a.xyz.com/dir/page.html同源检测的示例: UR ...
- CORS跨域资源共享你该知道的事儿
"唠嗑之前,一些客套话" CORS跨域资源共享,这个话题大家一定不陌生了,吃久了大转转公众号的深度技术好文,也该吃点儿小米粥溜溜胃里的缝儿了,今天咱们就再好好屡屡CORS跨域资源共 ...
- 如何在ASP.NET Core中实现CORS跨域
注:下载本文的完整代码示例请访问 > How to enable CORS(Cross-origin resource sharing) in ASP.NET Core 如何在ASP.NET C ...
- Web APi之手动实现JSONP或安装配置Cors跨域（七）
前言 照理来说本节也应该讲Web API原理,目前已经探讨完了比较底层的Web API消息处理管道以及Web Host寄宿管道,接下来应该要触及控制器.Action方法,以及过滤器.模型绑定等等,想想 ...
随机推荐
- python 求下个月的最后一天
[1]根据当前月求上个月.下个月的最后一天 (1)求当前月最后一天 (2)求前一个月的最后一天 (3)求下一个月的最后一天 学习示例与应用实例,代码如下: #!/usr/bin/python3 #-* ...
- vue+mousemove实现拖动，鼠标移动过快拖动就失效
今天用vue+原生js的mousemove事件,写了个拖动,发现只能慢慢拖动才行,鼠标只要移动快了,就失效,不能拖动了: 搞了半天在,总算解决了,但是问题的深层原理还没搞清楚,知道的大侠可以留言分享, ...
- Linux中的关机
我是用普通用户登录,在终端下输入shutdown命令,结果显示 command not found.这就奇怪了,难道我的linux不支持这个命令?man了一下shutdown,大篇幅的说明告诉我,我的 ...
- Fiddler 详尽教程与抓取移动端数据包
转载自:http://blog.csdn.net/qq_21445563/article/details/51017605 阅读目录 1. Fiddler 抓包简介 1). 字段说明 2). Stat ...
- 【BZOJ3488】[ONTAK2010]Highways 扫描线+树状数组
[BZOJ3488][ONTAK2010]Highways Description 给一棵n个点的树以及m条额外的双向边q次询问,统计满足以下条件的u到v的路径:恰经过一条额外的边不经过树上u到v的路 ...
- debian dhcp配置
1 将/etc/network/interfaces中设置成dhcp auto eth0iface eth0 inet dhcp 2 重启网络服务 /etc/init.d/networking res ...
- iOS 邓白氏编码的申请
http://www.cocoachina.com/ios/20161214/18225.html
- 【译】Stackoverflow：Java Servlet 工作原理问答
导读 本文来自stackoverflow的问答,讨论了Java Servlet的工作机制,如何进行实例化.共享变量和多线程处理. 问题:Servlet 是如何工作的?Servlet 如何实例化.共享变 ...
- java访问微信接口发送消息
最近在开发activiti流程的时候有个需求:流程到达每个审批节点后,需要向该节点的审批人发送一个消息,提示有审批需要处理. 参考了一下微信的开发者文档和网络上的一些技术博客,现在记录一下.以便后续继 ...
- 教你如何写一个 Yii2 扩展
前言 把一系列相关联的功能使用模块开发,好处多多,维护起来很方便,模块还可以单独发布出去,让下一个项目之间使用,真是方便. 下面我就写一个开发扩展的简单教程. Gii gii 自带帮助我们生成一个基本 ...