跨域问题分析
代码这种东西就是得不断的使用,如果长时间不用就会生疏。今天偶然间,有人问我跨域的原理和怎么解决,说了一下,但是总是感觉还是差了点什么,特此温习一下。
跨域的产生
最根本的原因就是浏览器的同源策略,所谓 "同源" 指的是 "三个相同" 协议相同、域名相同、端口相同,违反一个就会产生跨域问题。
请求的分类(简单请求和非简单请求)
- 请求方法是以下三种方法之一:HEAD,GET,POST;
- HTTP 的头信息不超出以下几种字段:
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type(只限于三个值 application/x-www-form-urlencoded、 multipart/form-data、text/plain)
凡是不同时满足上面两个条件,就属于非简单请求。
解决跨域问题的方式
1、JSONP 方式 (只能是 get)
- function addScriptTag(src) {
- var script = document.createElement('script');
- script.setAttribute('type', 'text/javascript');
- script.src = src;
- document.body.appendChild(script);
- }
-
- window.onload = function() {
- addScriptTag('http://example.com/ip?callback=foo');
- }
-
- function foo(data) {
- console.log('response data:' + JSON.stringify(data));
- }
请求时,接口地址是作为构架出的脚本标签的 src 的,这样,当脚本标签构建出来时,最终的 src 是接口返回的内容;
2、CORS 方式
cors 是一个 W3C 标准,全称是 -- 跨域资源共享,其实所有的浏览器 ajax 请求都是基于 CORS 机制的,只是我们可能平时并不关心而已(所以说其实现在 CORS 解决方案主要是考虑后台该如何实现的问题 )。
3、方向代理
通过把本地一个 url 前缀映射到要跨域访问的 web 服务器上,就可以实现跨域访问。
ajax 跨域的表现
- 第一种
No 'Access-Control-Allow-Origin' header is present on the requested resource, 并且 The response had HTTP status code 404
原因:本次请求时'非简单请求',所以请求会预先发送一个 options 请求;但是服务器端没有允许 options 请求,导致无法找到对应的接口地址
解决方案:服务器允许 options 请求
- 第二种
No 'Access-Control-Allow-Origin' header is present on the requested resource, 并且 The response had HTTP status code 405
原因:后台方法允许 OPTIONS 请求, 但是一些配置文件中 (如安全配置), 阻止了 OPTIONS 请求, 才会导致这个现象。
解决方案: 后端关闭对应的安全配置。
- 第三种
No 'Access-Control-Allow-Origin' header is present on the requested resource, 并且 status 200。
原因:服务器端后台允许 OPTIONS 请求, 并且接口也允许 OPTIONS 请求, 但是头部匹配时出现不匹配现象;
解决方案: 后端增加对应的头部支持
- 第四种
heade contains multiple values ','
原因:后台响应的 http 头部信息有两个 Access-Control-Allow-Origin:,服务器端在项目的配置文件中配置了一次 origin,然后在代码中有手动的添加了一次 origin
解决方案:建议删除代码中手动添加的,只用项目配置中的即可
来源: http://www.jianshu.com/p/5e50e704d1e6