跨域问题的根本解决方案CORS

Joonas 发布于2019-08-26 11:44 / 1159人阅读

摘要：介绍关于跨域问题有很多的解决方案，这里我们总结一下目前最通用最强大的解决方案。的工作组推荐了一种新的机制，即跨域资源共享，简称。预检请求用的请求方法是，表示这个请求是用来询问的。头信息里面，关键字段是，表示请求来自哪个源。

介绍

关于跨域问题有很多的解决方案，这里我们总结一下目前最通用最强大的解决方案：CORS。

W3C 的 Web 工作组推荐了一种新的机制，即跨域资源共享（Cross-origin Resource Sharing），简称CORS。其实这个机制就是实现了跨站访问控制，使得安全地进行跨站数据传输成为可能。

跨源资源共享标准( cross-origin sharing standard) 使得以下场景可以使用跨站 HTTP 请求：

使用 XMLHttpRequest 或 Fetch发起跨站 HTTP 请求。

Web 字体 (CSS 中通过 @font-face 使用跨站字体资源)，因此，网站就可以发布 TrueType 字体资源，并只允许已授权网站进行跨站调用。

WebGL 贴图

使用drawImage绘制

Images/video 画面到canvas.

样式表（使用 CSSOM）

Scripts (for unmuted exceptions)

CORS分为简单请求和复杂请求，处理方法也是有不同的，所以我们分别总结。

简单请求

什么是简单请求呢？同时满足以下两个条件，就是简单请求：

请求是下列之一：
HEAD
GET
POST

HTTP的头信息不超出以下几种字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

实现方法非常简单，只需要把服务器的响应报文里的Access-Control-Allow-Origin设置为*或者包含由 Origin指明的站点。

Access-Control-Allow-Origin是HTTP响应报文中的一个字段，Origin是HTTP请求报文中的以一个字段,如果不清楚这两个字段的话，可以自行查阅关于HTTP报文的知识，比如HTTP | MDN。

复杂请求

如果不是简单请求，那就是复杂请求，比如请求的方法是PUT或者DELETE，比如Content-Type字段的类型是application/json，比如设置了自定义头信息。

复杂请求就是比简单请求多了个预检请求（preflight）而已。

预检请求就是浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。

预检请求用的请求方法是OPTIONS，表示这个请求是用来询问的。头信息里面，关键字段是Origin，表示请求来自哪个源。除了Origin字段，还有两个字段非常重要：Access-Control-Request-Method和Access-Control-Request-Headers，分别表示允许的请求方法和请求头。

举一个具体的例子：

现在，我们有一个页面向服务器发送了一个POST请求，并且我们自己定义了一个请求头字段My-HEADER，这时候浏览器就会首先发送一个OPTION请求来做预检请求，请求头里有以下字段：

Access-Control-Request-Method: POST
Access-Control-Request-Headers: My-HEADER

如果预检请求成功的话，响应头里的内容如下：

Access-Control-Allow-Origin: http://example.com //表明服务器允许http://example.com的请求
Access-Control-Allow-Methods: POST, GET, OPTIONS //表明服务器可以接受POST, GET和 OPTIONS的请求方法
Access-Control-Allow-Headers: My-HEADER //传递一个可接受的自定义请求头列表
Access-Control-Max-Age: 3000000 //告诉浏览器，本次预检请求的响应结果有效时间是多久

总结

以上就是CORS方法解决跨域问题的流程，CORS支持所有类型的HTTP请求，是目前跨域问题的根本解决方案。

GPU云服务器云服务器跨域问题解决问题的方法 cdn跨域问题 javascript跨域问题

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

转载请注明本文地址：https://www.ucloud.cn/yun/107485.html

一篇文章搞明白CORS跨域

摘要：跨域实在是面试官一个人的利器。首先，什么是是一个标准，全称是跨域资源共享。它的值是一个布尔值，表示是否允许发送。设为，即表示服务器明确许可，可以包含在请求中，一起发给服务器。面试问到数据交互的时候，经常会问跨域如何处理。大部分人都会回答JSONP，然后面试官紧接着就会问：JSONP缺点是什么啊？这个时候坑就来了，如果面试者说它支持GET方式，然后面试官就会追问，那如果POST方式发送...

tanglijun 2019-08-23 13:42 评论0 收藏0
前端跨域及解决方案

摘要：但是如果是一级域名相同，二级及以上域名不同的网页可以通过设置来共享。设置有两种方式前端脚本中设置服务器接口设置时指定所属的域名为一级域名。服务器检查过预检请求头之后，确认允许跨域请求，就可以做出回应。一、跨域问题产生的原因根本原因是由于浏览器的同源政策。 1.1.同源政策同源政策由网景公司（Netscape）1995年引入浏览器。目前所有浏览器都实行这个政策。所谓同源是指三个相同...

wayneli 2019-08-21 17:53 评论0 收藏0
AJAX 跨域解析

摘要：这里只讲解了两种常见的跨域方式，因为存在一些弊端，因此推荐使用等方式来解决跨域问题。一、什么是 AJAX 跨域问题同源策略规定，AJAX 请求（XMLHttpRequest）只能发给同源的网址，否则就会出错。所谓的同源策略是指 3 个相同：协议相同、域名相同、端口相同。比如 http://www.example.com/index.html 这个网址，协议是http ，域名是 w...

tinylcy 2019-08-23 12:14 评论0 收藏0
浅谈前端跨域

摘要：一什么是跨域跨域简单的理解就是同源策略的限制。同源策略限制的内容请求不能正常进行。同源策略默认地址是网页的本身。一、什么是跨域？跨域简单的理解就是JavaScript同源策略的限制。是出于安全的考虑，a.com域名下的js不能操作b.com或者c.com域名下的对象。当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。不同域之间相互请求资源，就算叫跨域。一个正常...

dunizb 2019-08-26 13:55 评论0 收藏0
跨域理解

摘要：什么是跨域个人一句话解释如果与不同源，那么页面不能获取页面的资源。所以用同源策略来限制跨域是必须的。它是标准，是跨源请求的根本解决方法。本文整理了一些有关跨域的基础知识和细节问题。什么是跨域个人一句话解释：如果 url A 与 url B 不同源，那么页面A不能获取页面B的资源。这里有两个关键词：url 和同源，浏览器的同源策略就是针对两个url，它们满足以下三个条件，才是同源...

zhongmeizhi 2019-08-23 10:35 评论0 收藏0