跨域 前端
本人技术小菜鸟一枚~写技术博客旨在记录做项目过程中遇到的一些常见问题以及解决方案，为了方便以后查找，并且供有需要的人们参考啦~~
跨域问题是进行ajax请求的时候最常遇到的一个问题，估计很多刚开始做项目的新手会遇到，因此用这个来为我的技术博客打头阵吧~~（其实这是去年11月写的，不过现在改用segmentfault了，所以就顺带把文章搬来这边啦）
跨域的定义
同源策略
CSRF
CORS
跨域的定义
什么叫跨域呢？
跨域，是指在不同域之间进行数据传输，凡是协议、域名或者端口只要其中一个不同都算跨域。
为什么会出现跨域的问题呢？这要从“同源策略”说起。
同源策略
同源策略是由netscape提出的一个安全策略，防止恶意窃取信息。
同源就是指域名、协议、端口都相同。之所以出现跨域问题就是因为同源策略。所有支持js的浏览器都会使用这个策略，当浏览器执行一个脚本的时候会检查这个脚本属于哪个页面，与当前页面同源的才会被执行。
关于同源策略的一些延伸知识可以去这里看阮一峰-浏览器同源政策及其规避方法。
CSRF
为什么要限制跨域访问呢，这时候就涉及到一个CSRF攻击的问题。
CSRF（Cross-site request forgery，跨站请求伪造）可以盗取用户的身份，以其名义发送恶意请求。在这里不进行详述，hyddd-浅谈CSRF攻击方式，这栗子和语气太像我们大学时候的一个老师了哈哈，有兴趣的可以了解一下。
CORS
一般来说，解决跨域问题常见的方法有：
JSONP
HTML5的postMessage
document.domain
反向代理
CORS
网上有很多相关资料，因此在这里就只简单讲一下我在项目中用到的解决方案。
定义
CORS（Cross-origin resource sharing，跨域资源共享）是为了解决同源策略的访问限制而引入的一种概念。它是一种网络浏览器的技术规范，定义了一种浏览器和服务器交互的方式确定是否允许跨域请求，因此它需要前端和服务器的支持。
工作原理
使用XHR发送请求时，如果浏览器发现该请求非同源，就会增加一个请求头Origin，指明请求源，然后服务器依此作出相应处理。如果返回的头信息包含的Access-Control-Allow-Origin里包含此源，那么就可以拿到数据，否则驳回。
很快菜鸟博主发现只在服务器加这一段是不够的，因为在post之前还发送了一个options的请求，博主当时真是一脸懵逼。后来发现原来浏览器会将CORS请求分成两类：简单请求和非简单请求，对于简单请求，浏览器只会在请求头加origin字段，而对于非简单请求，在正式通信前，会增加一次HTTP查询请求，也就是预飞请求options（一般说法是预检请求但博主任性哈哈），只有该域名在得到服务器许可后才会正式发送XHR请求。由于博主用的是angular，发送post请求时会自动将数据序列化成json格式，请求头的contentType是application/json，因此服务器也需要对options作出相应处理，才能进行下一步。
解决方案
说到这里其实怎么做已经很明显了。不过还是贴上处理的代码，以防自己以后忘记，以下是nodejs的处理：
app.all('/api/*', function(req, res, next) {
res.header('Access-Control-Allow-Origin', '*');
res.header('Access-Control-Allow-Headers', 'accept, content-type');
res.header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
if(req.method == 'OPTIONS') {
return res.status(204).end();
}
next();
})
后话
其实在后来做项目的时候发现这种方法不完全可靠的，还是要通过jsonp来解决。不过有点懒，以后遇到再补充吧哈哈。
想了解更多的可以戳以下网址~
阮一峰-跨域资源共享CORS详解
小树林-探讨跨域请求资源的几种方式
Hedgehog-一个Option请求引发的深度解析
angular js jquery中post请求的一点小区别
发布于 1 小时前
关注
seekei 声望数: 2 粉丝数: 0
你可能感兴趣的文章
前端和接口跨域访问
1 业务场景 当前产品开发，前端和后端完全分离，在调试阶段，静态服务器和接口服务器的端口是不同，前后端通信时，这里就需要跨域处理， 这点完全可以再后端进行处理。 当用户第一次调用接口时，后端对其设置了相应的 cookie，在第二次调用时，我们要求前端调用接口时，会发送第一次调用时设置的 cookie。默认情况下，标...
kycool 4人收藏
前端跨域----不定时更新
前端跨域 前端跨域请求当前属于属于常规操作（AJAX) json-padding（纯前端跨域） 浏览器同源策略，正常情况下，会导致XHR无法跨域。 {代码...} script标签可以跨域加载js脚本。。script标签加载的脚本文件会立刻执行。 本地脚本预先定义一个callback(data)函数，然后向支持jsonp的服务发起一个请求，服务器一般会返回cal...
怀疑真爱的流浪者jason 21人收藏
前后端分离跨域问题的解决方案
小结 前端处理(即前端用cros处理跨越，或者前端搭建一个nodejs转发，存在重复建设) nginx处理(最为灵活的方案) 后端支持跨越(无法改造其他微服务的接口) docs 前后端分离之后，如何保护你的API 前后端分离开发部署模式 前后端分离的情况下, 跨域问题有没有好的解决方案?修改 前后端分离解决跨域问题 Angular+Springboot ..
