Access-Control-Allow-Origin跨域

Access-Control-Allow-Origin，跨域

1、浏览器的同源安全策略

浏览器只允许请求当前域的资源，而对其他域的资源表示不信任。那怎么才算跨域呢？

请求协议http,https的不同
域domain的不同
端口port的不同
好好好，大概就是这么回事啦，下面我们讲2种中规中矩的办法：CORS，JSONP
（document.domain，window.name，web sockets 不谈）

2、CORS出来搞事了

这是W3C的大佬们搞出来的标准，全称是"跨域资源共享"（Cross-origin resource sharing）。其实呢，这个大部分还是后端人员的工作。我们先来看看整个流程下，都发生了什么？

在此之前，需要知道简单请求复杂请求这两个小朋友

简单请求：
1): 请求方式只能是：head，get，post
2): 请求头允许的字段：Accept，Accept-Language，Content-Language，Last-Event-ID
Content-Type：application/x-www-form-urlencoded、multipart/form-data、text/plain 三选一
2.复杂请求：没错，不满足上面的，都是我啦！

简单请求:

浏览器：诶，你小子要跨域是吧，我得问问服务器大哥肯不肯！往请求头添加origin亮一下牌面

有个奇怪现象，谷歌游览器在非跨域情况下，也会发送origin字段

请求头origin字段为当前域
服务器：诶，你是谁，我来看看你的origin，嗯嗯，可以，符合我的要求，放行！顺便告诉你，老夫的规矩！

其中，最重要的就是Access-Control-Allow-Origin，标识允许哪个域的请求。当然，如果服务器不通过，根本没有这个字段，接着触发XHR的onerror，再接着你就看到浏览器的提示xxx的服务器没有响应Access-Control-Allow-Origin字段

//指定允许其他域名访问
'Access-Control-Allow-Origin:http://172.20.0.206'//一般用法（*，指定域，动态设置），3是因为*不允许携带认证头和cookies
//是否允许后续请求携带认证信息（cookies）,该值只能是true,否则不返回
'Access-Control-Allow-Credentials:true'

上面第一行说到的Access-Control-Allow-Origin有多种设置方法：

设置是最简单粗暴的，但是服务器出于安全考虑，肯定不会这么干，而且，如果是的话，游览器将不会发送cookies，即使你的XHR设置了withCredentials
指定域，如上图中的http://172.20.0.206，一般的系统中间都有一个nginx，所以推荐这种
动态设置为请求域，多人协作时，多个前端对接一个后台，这样很方便
withCredentials：表示XHR是否接收cookies和发送cookies，也就是说如果该值是false，响应头的Set-Cookie，浏览器也不会理，并且即使有目标站点的cookies，浏览器也不会发送。

复杂请求:

最常见的情况，当我们使用put和delete请求时，浏览器会先发送option（预检）请求，不过有时候，你会发现并没有，这是后面我们会讲到缓存。

预检请求

与简单请求不同的是，option请求多了2个字段：
Access-Control-Request-Method：该次请求的请求方式
Access-Control-Request-Headers：该次请求的自定义请求头字段

服务器检查通过后，做出响应：

//指定允许其他域名访问
'Access-Control-Allow-Origin:http://172.20.0.206'//一般用法（*，指定域，动态设置），3是因为*不允许携带认证头和cookies
//是否允许后续请求携带认证信息（cookies）,该值只能是true,否则不返回
'Access-Control-Allow-Credentials:true'
//预检结果缓存时间,也就是上面说到的缓存啦
'Access-Control-Max-Age: 1800'
//允许的请求类型
'Access-Control-Allow-Methods:GET,POST,PUT,POST'
//允许的请求头字段
'Access-Control-Allow-Headers:x-requested-with,content-type'

这里有个注意点：Access-Control-Request-Method，Access-Control-Request-Headers返回的是满足服务器要求的所有请求方式，请求头，不限于该次请求，我一次性告诉你了，别TM问我了

3、大家好，我是渣渣辉，是兄dei就来…呸呸呸，我是JSONP

好啦，jsonp的原理：通过script标签引入一个js文件，这个js文件载入成功后会执行我们在url参数中指定的函数，并且会把我们需要的json数据作为参数传入，有种回调的味道！

例子：

<script src="http://example.com/data.php?callback=dosomething"></script><script type="text/javascript">function dosomething(jsondata){//处理获得的json数据}
</script>

jquery用法

<script type="text/javascript">$.getJSON('http://example.com/data.php?callback=?,function(jsondata)'){//处理获得的json数据};
</script>

JSONP的优缺点
优点：它不像XMLHttpRequest对象实现的Ajax请求那样受到同源策略的限制；它的兼容性更好，在更加古老的浏览器中都可以运行，不需要XMLHttpRequest或ActiveX的支持；并且在请求完毕后可以通过调用callback的方式回传结果。

缺点：它只支持GET请求而不支持POST等其它类型的HTTP请求；它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题。

原文链接：
https://www.jianshu.com/p/89a377c52b48

好啦，大概就是这个样子啦，本文中大部分思路取自阮一峰老师跨域资源共享 CORS 详解，当初学习的时候，也是看阮一峰老师的文章。

Access-Control-Allow-Origin跨域相关推荐

HTTP Headers 之 Origin跨域访问一定要加上这个header
1.跨域访问概念 HTTP 协议中的 Origin Header 存在于请求中,用于指明当前请求来自于哪个站点. 字段内容 Origin 仅仅包含站点信息,不包含任何路径信息. 语法 Origin: ...
php access control allow origin,js请求跨域问题--Access-Control-Allow-Origin
在前台调试的时候出现XMLHttpRequest cannot load http://www.xx.com/Action/Index.php?Action=11. No 'Access-Contro ...
WebApi Ajax 跨域请求解决方法（CORS实现）
ASP.NET Web API 的好用使用过的都知道,没有复杂的配置文件,一个简单的ApiController加上需要的Action就能工作.但是在使用API的时候总会遇到跨域请求的问题, 特别各种A ...
Nginx反向代理解决跨域问题（个人学习总结）
一.理解Nginx Nginx是一款轻量级的Web服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,在BSD-like 协议下发行.其特点是占有内存少,并发能力强,事实上nginx的并 ...
JS —— 5、数据交互、跨域
目录 26.数据交互 (1)原生请求 (2)参数解析 1.req.body--接收前端body的参数(下面演示:2) 2.req.query(下面演示:1) 3.req.params(下面演示:2.3 ...
Springboot跨域配置报错:When allowCredentials is true, allowedOrigins cannot contain the specia
错误信息为: When allowCredentials is true, allowedOrigins cannot contain thespecial value "*"si ...
Vue学习笔记（三）Vue2三种slot插槽的概念与运用 | ES6 对象的解构赋值 | 基于Vue2使用axios发送请求实现GitHub案例 | 浏览器跨域问题与解决
文章目录一.参考资料二.运行环境三.Vue2插槽 3.1 默认插槽 3.2 具名插槽 3.3 作用域插槽 ES6解构赋值概念 & 作用域插槽的解构赋值 3.4 动态插槽名四.GitHu ...
ASP.NET MVC和ASP.NET Web API跨域请求问题解决方案【最全】
无论是ASP.NET MVC和ASP.NET Web API跨域请求大致分成2种方式第一种:web.config 配置第二种:用HttpContext.Response.AppendHeader设 ...
AJAX跨域问题及解决方案
文章目录跨域哪些方式可以进行跨域部署服务器部署模块 ajax1 ajax2 测试跨域解决方案方案1:设置响应头方案2:jsonp 深入一下jsonp 方案3:代理机制(httpclien ...
PHP - 如何实现跨域
因工作需要,客户端软件的一些界面用HTML+CSS+Javascript实现,这些文件放在客户端本地,以本地文件形式加载,但是有些情况下,需要连接服务器取得一些信息,如果不做任何处理,则请求失败,返回 ...

Access-Control-Allow-Origin跨域

Access-Control-Allow-Origin跨域相关推荐

最新文章

热门文章