上海专业网站建,国外公共空间设计网站,百度网盘资源搜索引擎,项目计划书范文免费跨域
跨域是指一个资源请求与其不在同一个域#xff08;源#xff09;的资源#xff0c;不在同一个域#xff08;源#xff09;是指两个域的协议、域名或端口不同。
同源策略
出于安全考虑#xff0c;浏览器制定了同源策略#xff0c; 限制了某些跨域请求。同源策略是…跨域
跨域是指一个资源请求与其不在同一个域源的资源不在同一个域源是指两个域的协议、域名或端口不同。
同源策略
出于安全考虑浏览器制定了同源策略 限制了某些跨域请求。同源策略是跨域问题产生的根源。但是同源策略并没有限制所有的跨域请求比如浏览器不限制加载嵌在script标签中跨域的js文件。
跨域资源共享机制CORS
跨域资源共享CORS是浏览器提供的一种跨域协商机制让前后端协商是否可以发出跨域请求。 CORS添加了若干Access-controll-request-xxx 的头给客户端声明自己的源、要使用的头部、用使用的请求方法添加了若干Access-Controll-Allow-xxx的头给服务端声明自己支持跨域的源、头部和方法。 CORS将请求分为简单请求和复杂请求对于复杂跨域请求发送真正请求之前要通过预检机制和后端协商。
简单请求
一个简单请求要满足以下所有条件
只能使用GET、HEAD或POST请求方法不得手动设置以下头之外的头 AcceptAccept-LanguageContent-LanguageContent-TypeDPRDownlinkSave-DataViewport-WidthWidthContent-Type只能是下面的一种 application/x-www-form-urlencodedmultipart/form-datatext/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)
