首页 > 其他分享 >Cross-Origin Resource Sharing(CORS)详解,CORS详解,CORS原理分析

Cross-Origin Resource Sharing(CORS)详解,CORS详解,CORS原理分析

时间:2022-11-28 18:59:34浏览次数:36  
标签:Origin www http html 详解 CORS com

Cross-Origin Resource Sharing(CORS)详解,CORS详解,CORS原理分析
Cross-Origin Resource Sharing 通常简称为:CORS
它是一种机制,这个机制使用了一个额外的HTTP响应头来赋予当前user-agent(浏览器)获得在当前源(origin)下使用非同源资源的权限。
非同源就是Cross-Origin的概念,这里边的权限就是访问非同源的资源权限


出于安全的原因,浏览器限制从脚本内发起跨源的HTTP请求,也就意味着限定了当前web应用程序只能请求与当前同域(同源)的HTTP资源,除非使用CORS头信息

CROS头信息设置
举例:我们访问的是 http://www.myapp.com/index.html 页面,那么当前的origin就是 http://www.myapp.com。 而这个页面中的脚步请求的资源是 http://www.other.com/goods.json ,根据上文介绍的信息我们可以得知:这个是非同源的请求,且属于浏览器拦截名单里边的请求形式。所以我们需要通过设置CROS头信息来完成跨域调用。

1.Access-Control-Allow-Origin 头信息设置
本例中,我们需要在http://www.other.com/goods.json所对应的服务器代码中加入响应头:

Access-Control-Allow-Origin: http://www.myapp.com

设置完之后,当前的源http://www.myapp.com获得了访问数据的权限。这个时候我们可以在请求/响应头信息看到多了一些信息,大致如下:

GET /...
Host: ...
User-Agent: ...
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8
Accept-Language: en-us,en;q=0.5
Accept-Encoding: gzip,deflate
Accept-Charset: ISO-8859-1,utf-8;q=0.7,*;q=0.7
Connection: keep-alive
Referer: http://www.myapp.com/index.html
Origin: http://www.myapp.com

--------------------------
HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 00:23:53 GMT
Server: Apache/2.0.61
Access-Control-Allow-Origin: http://www.myapp.com
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: application/xml


2.使用JSONP解决跨域
除了使用设置CORS头信息,我们还可以使用JSONP来实现跨域调用。以Jquery为例,我们可以使用如下的写法来调用跨域资源:

function corsTest(){
$.ajax({
type: "get",
url: "http://other.host/data.json",
dataType:"jsonp",
jsonp:"callback",
jsonpCallback:"callBack",
......
})
}
function callBack(data){
// do something
......
}

 


同源的定义
给定两个页面,如果它们的协议、端口(如果指定了端口)、host都相同,则称之为同源。现在给出一个源连接和一些其他连接与这个源的比较,结合下表,我们来实际的理解一下这个概念。

http://store.company.com/dir/page.html:

URL 是否同源 原因
http://store.company.com/dir2/other.html 是
http://store.company.com/dir/inner/another.html 是
https://store.company.com/secure.html 否 协议不同
http://store.company.com:81/dir/etc.html 否 端口不同
http://news.company.com/dir/other.html 否 host不同

 



标签:Origin,www,http,html,详解,CORS,com
From: https://www.cnblogs.com/oktokeep/p/16933029.html

相关文章

  • Mysql 连接参数 useAffectedRows 详解
    Mysql连接参数useAffectedRows详解Javamysql链接串:jdbc:mysql://mysql安装IP:3306/db_test?useUnicode=true&characterEncoding=UTF8&zeroDateTimeBehavior=convertTo......
  • 日志式文件系统(ext3)详解
    一、概述通常在系统运行中写入文件内容的同时,并没有写入文件的元数据(如权限、所有者及创建和访问时间),如果在写入文件内容之后与写入文件元数据之前的时间差里,系统非正......
  • RecyclerView详解
    RecyclerView是support-v7包中的新组件,是一个强大的滑动组件,与经典的ListView相比,同样拥有item回收复用的功能,但是直接把viewholder的实现封装起来,用户只要实现自己的viewh......
  • 数据分析八大模型:详解RFM模型
    一、RFM的基本思路RFM模型由三个基础指标组成:R:最近一次消费至今的时间F:一定时间内重复消费频率M:一定时间内累计消费金额 RFM模型里,三个变量的含义是很具体......
  • 【c++】map用法详解
    【c++】map用法详解LeeMooq已于2022-05-0122:01:43修改21398收藏46分类专栏:c++学习文章标签:c++版权c++学习专栏收录该内容5篇文章3订阅订阅专栏map是c++标准......
  • 常用css属性flex: 1详解
    flex:1实际代表的是三个属性的简写flex-grow是用来增大盒子的,比如,当父盒子的宽度大于子盒子的宽度,父盒子的剩余空间可以利用flex-grow来设置子盒子增大的占比flex-shrin......
  • vue的.sync修饰符用法及原理详解
    vue.sync的历史vue.sync修饰符最初存在于vue1.0版本里,但是在2.0中被移除了。但是在2.0发布之后的实际应用中,vue官方发现.sync还是有其适用之处,比如在开发可复......
  • 详解sklearn的多分类模型评价指标
    说到准确率accuracy、精确率precision,召回率recall等指标,有机器学习基础的应该很熟悉了,但是一般的理论科普文章,举的例子通常是二分类,而当模型是多分类时,使用sklearn包去计......
  • TCP/UDP的连接与关闭详解
    https://blog.csdn.net/pupoqian3720/article/details/81290011传输层:总体作用:在广域网中建立数据传输通道,进行数据传输,负责端到端的通信那么是什么是端到端呢?A:两个方......
  • linux c下程序调试工具详解
    1.htop/tophtoptophtop主要参数说明#Time:当前时间#Uptime:系统运行时间#Tasks:进程总数、当前进程运行数#Loadaverage:1、5、10分钟的负载情况#Avg:系统CPU......