跨域

跨域是指一个资源请求与其不在同一个域（源）的资源，不在同一个域（源）是指两个域的协议、域名或端口不同。

同源策略

出于安全考虑，浏览器制定了同源策略，限制了某些跨域请求。同源策略是跨域问题产生的根源。但是，同源策略并没有限制所有的跨域请求，比如浏览器不限制加载嵌在<script>标签中跨域的js文件。

跨域资源共享机制（CORS）

跨域资源共享（CORS）是浏览器提供的一种跨域协商机制，让前后端协商是否可以发出跨域请求。
CORS添加了若干Access-controll-request-xxx 的头，给客户端声明自己的源、要使用的头部、用使用的请求方法；添加了若干Access-Controll-Allow-xxx的头，给服务端声明自己支持跨域的源、头部和方法。
CORS将请求分为简单请求和复杂请求，对于复杂跨域请求，发送真正请求之前要通过预检机制和后端协商。

简单请求

一个简单请求要满足以下所有条件：

只能使用GET、HEAD或POST请求方法
不得手动设置以下头之外的头
- Accept
- Accept-Language
- Content-Language
- Content-Type
- DPR
- Downlink
- Save-Data
- Viewport-Width
- Width
Content-Type只能是下面的一种
- application/x-www-form-urlencoded
- multipart/form-data
- text/plain
对于简单请求，后端只需要在返回体里设置相应的Access-controll-Allow-xxx就可以了

复杂请求和预检机制

除了上述简单请求外，其它请求都是复杂请求。对于复杂请求，浏览器会首先使用OPTION方法发送一个预验请求（Preflighted requests）到后端，后端决定是否允许发送该跨域请求，将决定结果返回前端。只有预检通过之后，真实的请求才会发送。流程如下：

(图片来自：https://www.html5rocks.com/en/tutorials/cors/#toc-adding-cors-support-to-the-server)

CORS跨域实现

使用CORS机制，需要分清楚是简单请求还是复杂请求，因为复杂跨域请求会触发预检机制。对于简单跨域请求，后端只需要在响应体里返回Access-Controll-Allow就可以了，但是对于复杂请求，则需要实现一个Option方法来返回Access-Controll-Allow，或者将请求调整为一个简单请求。预检整体交互过程如下图所示：

一个常见的例子是，在响应里设置了Access-Controll-Allow，然后使用Jquery发送一个跨域POST请求，你会发现没有问题。接着使用 angular resource的save方法发送同样一个跨域请求，你就会发现报错了。这是为什么呢？因为jquery默认使用Content-Type:application/x-www-form-urlencoded，所以它发送的是一个简单请求，但是，因为angular resource 默认使用Content-Type:application/json，所以它发送的是一个复杂请求，这触发了浏览器的预检机制。这时我们手动设置Content-Type:application/x-www-form-urlencoded，或者后端实现一个Option方法，

需要注意的是，改变content-type可能会导致后端解析数据出错，例如content-type:application/x-www-form-urlencoded,参数是以键值对形式保存的，很多后端框架都会做自动解析操作，而content-type: text/plain,参数的形式就不确定了，只能以原始数据流的方式保存（放在PayLoad里面），需要自己解析。详情请看 AJAX POST请求中参数以form data和request payload形式在servlet中的获取方式

参考：Server-Side Access Control (CORS)

跨域问题及CORS机制相关推荐

跨域资源共享（CORS）--跨域ajax
几年前,网站开发者都因为ajax的同源策略而撞了南墙.当我们惊叹于XMLHttpRequest对象跨浏览器支持所带来的巨大进步时,我们很快发现没有一个方法可以使我们用JavaScript实现请求跨域访 ...
漫谈同源策略（SOP）和跨域资源共享（CORS）
前言提要: 面试的时候被问到了是否了解同源策略,并没有了解过 (虽然朋友洋写了文章,但是我当时也没有仔细琢磨).所以有了这篇文- 据说了解同源策略是十分有必要的,要深入了解XSS/CSRF等w ...
新蜂商城（newbee-mall-api）部分接口实验，跨域处理（同源策略，跨域访问，CORS）,系统安全问题（Session，Cookie，Token，OAuth）（软件工程综合实践课程第十三周）
文章目录一.要求二.知识总结跨域处理 1.同源策略 1.1 浏览器的同源策略 1.2 跨域请求实验 2 跨域访问 2.1 添加响应头来处理跨域 2.1.1 CORS 跨域资源共享 2.1.2 设 ...
跨域解决方案之CORS及其相关概念
在讲解 CORS 之前先了解以下几个概念同源策略同源策略(Same origin policy)是一种约定,是浏览器限制一个域名与另外一个域名的资源的交互的规则,是浏览器最核心也最基本的安全功能, ...
JS跨域请求解决方案-CORS
文章目录 JS跨域请求解决方案-CORS 1.JS跨域请求测试JavaScript的跨域请求(失败) 2. 跨域解决方案CORS 普通实现方法 springMVC的跨域请求注解 3.分布式Id解决方 ...
跨域解决方案（CORS）
跨域解决方案(CORS) 1. 什么是跨域? 跨域问题是出于浏览器的[同源策略]限制.同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略 ...
Ajax入门笔记（原生Ajax、jQuery、axios、fetch、跨域SONP、CORS）
文章目录一.基础知识 1.1AJAX简介 1.2 AJAX的特点 1.2.1 AJAX 的优点 1.2.2 AJAX 的缺点 1.3 XML简介 1.4 HTTP简介 1.4.1 请求报文 1.4. ...
【AJAX 笔记】AJAX 基本、HTTP 基本、原生 AJAX 的使用，jQuery / Axios / fetch 发送请求、跨域（JSONP/CORS）
文章目录 1 Ajax 概述 1.1 AJAX 简介 1.2 XML 简介 1.3 AJAX 的特点 1.3.1 AJAX 的优点 1.3.2 AJAX 的缺点 1.4 AJAX 属性和方法 2. H ...
HTTP的同源策略与跨域资源共享（CORS）机制
同源策略准确的说,同源策略是指,浏览器内部在发起如下请求时,该来源必须是当前同源的HTTP资源: 1. 以跨站点的方式调用XMLHttpRequest或者Fetch API. 2. Web字体(用于 ...

跨域问题及CORS机制

跨域