2013影响网站百度搜索排名关键因素统计技术外包网站

当前位置： 首页 > news >正文

2013影响网站百度搜索排名关键因素统计,技术外包网站,郓城如何做网站seo,高端建站文章目录 同源策略同源与异源跨域的限制场景解决方案 CORS 请求分类 简单请求预检请求 注意点一 【关于Cookie】注意点二 【关于跨域获取响应头】 JSONP 基本流程 代理服务器 如何选择对应方案 同源策略 **同源策略是一套浏览器的安全策略机制#xff0c;当一个源的文档和脚… 文章目录 同源策略同源与异源跨域的限制场景解决方案 CORS 请求分类 简单请求预检请求 注意点一 【关于Cookie】注意点二 【关于跨域获取响应头】 JSONP 基本流程 代理服务器 如何选择对应方案 同源策略 同源策略是一套浏览器的安全策略机制当一个源的文档和脚本与另一个源的资源进行通信时同源策略就会对这个通信做出不同程度的限制。简单来说同源策略就是对同源资源的访问请求放行对异源资源的访问请求限制因此限制造成的开发问题称之为跨域异源问题。 点击查看W3C官方文档对同源策略的解释描述 同源与异源 两个URL地址的源地址如果完全相同则称之为同源否则称之为异源跨域 源一 源二 是否同源 http : //www.xyz.com/home https : //www.xyz.com/home 非同源 http : //www.xyz.com/home http : //mail.xyz.com/home 非同源 http : //www.xyz.com:8080/home http : //www.xyz.com:8081/home 非同源 http : //www.xyz.com:8080/home http : //www.xyz.com:8080/info 同源 跨域的限制场景 限制 DOM 访问限制 Cookie 访问默认情况下限制 Ajax 获取资源数据 请求页面的源称之为 页面源在该页面中发出的请求称之为 目标源。 当页面源和目标源一致时则为 同源请求否则为 异源请求跨域请求 注明 跨域限制仅存在浏览器端服务端不存在跨域限制。即使跨域了Ajax 请求也可以正常发出但响应数据不会交给开发者。link、script/、img … 这些标签发出的请求也可能跨域只不过浏览器对标签跨域不做严格限制对开发几乎无影响对 AJAX 发出的跨域请求严厉限制 解决方案 CORS CORSCross-Origin Resource Sharing跨域资源共享: 。是最正统的跨域解决方案同时也是浏览器推荐的解决方案。CORS是一套规则用于帮助浏览器判断是否校验通过。 CORS的基本理念是 只要服务器明确表示 允许请求则 通过校验服务器明确拒绝或没有表示则校验不通过 所以使用CORS解决跨域必须要保证服务器是我方可完全控制的 请求分类 CORS 将请求类型分为两类简单请求和预检请求对不同种类的请求它的规则有所区别。所以要理解CORS首先要理解它是如何划分请求的。 简单请求 复杂请求预检请求preflight 请求方法是:GETPOSTHEAD之一 头部字段满足CORS安全规范详见W3C安全规范文档说明 浏览器默认自带的头部字段都是满足安全规范的只要开发者不改动和新增头部就不会打破此条规则 如果有请求头 Content-Type必须是下列值中的一个 text/plain multipart/form-data application/x-www-form-urlencoded 点击查看简单请求完整判断逻辑 只要不是简单请求其它均为复杂预检请求 简单请求 对于简单请求的验证流程 预检请求 发送时机预检请求在实际跨域请求之前发出是由浏览器自动发起的主要作用用于向服务器确认是否允许接下来的跨域请求基本流程先发起 OPTIONS 请求如果通过预检则继续发起实际的跨域请求请求头内容一个 OPTIONS 预检请求通常会包含如下请求头 请求头 描述 Origin 发起请求的源 Access-Control-Request-Method 实际请求的 HTTP 方法 Access-Control-Request-Headers 实际请求中使用的自定义头如果有的话 服务器先通过浏览器的预检请求服务器需要返回如下响应头 请求头 描述 Access-Control-Allow-Origin 允许的源 Access-Control-Allow-Methods 允许的的 HTTP 方法 Access-Control-Allow-Headers 实际请求中允许的自定义头 Access-Control-Max-Age 预检请求的结果缓存时间可选 对预检请求的验证流程

1. 发送预检请求 2. 开始发送真实请求和简单请求一致 注意点一 【关于Cookie】 默认情况下AJAX的跨域请求并不会附带Cookie这样一来某些需要权限的操作就无法进行。不过可以通过简单的配置就可以实现附带Cookie // XHR var xhr new XMLHttpRequest(); xhr.withCredentials true;// fetch api fetch(url, {credentials: include })这样一来该跨域的AJAX请求就是一个附带身份凭证的请求 当一个请求需要附带Cookie时无论它是简单请求还是预检请求都会在请求头中添加Cookie字段 而服务器响应时需要 明确告知客户端服务器允许这样的凭据 告知的方式也非常的简单只需要在响应头中添加Access-Control-Allow-Credentials: true 即可。 对于一个附带身份凭证的请求若服务器没有明确告知浏览器仍然视为跨域被拒绝。 另外要特别注意的是对于附带身份凭证的请求服务器不得设置 Access-Control-Allow-Origin 的值为*。这就是为什么不推荐使用*的原因 注意点二 【关于跨域获取响应头】 在跨域访问时JS只能拿到一些最基本的响应头如Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma如果要访问其他头则需要服务器设置本响应头。 Access-Control-Expose-Headers头让服务器把允许浏览器访问的头放入白名单例如 Access-Control-Expose-Headers: authorization, a, b配置指定过后这样JS就能够访问指定的响应头了。 JSONP JSONP 是利用了 script 标签可以跨域加载脚本且不受严格限制的特性可以说是程序员智慧的结晶早期一些浏览器不支持 CORS 的时可以靠 JSONP 解决跨域 基本流程 第一步客户端创建一个script标签并将其 src 属性设置为包含跨域请求的 URL同时准备一个回调函数这个回调函数用于处理返回的数据服务端接收到请求后将数据封装在回调函数中并返回客户端的回调函数被调用数据以参数的形势传入回调函数 虽然可以解决问题但JSONP有着明显的缺陷 仅能使用GET请求容易产生安全隐患 恶意攻击者可能利用callback恶意函数的方式实现XSS攻击 容易被非法站点恶意调用 因此除非是某些特殊的原因否则永远不应该使用JSONP 代理服务器 由于同源策略只会在浏览器环境中存在一但脱离了浏览器则跨域不存在。所以我们可以借助于中间层代理服务器来进行请求和响应的转发 如何选择对应方案 基本原则是要保持生产环境和开发环境一致。 常见几种场景 这几种场景始终围绕保持和生产环境和开发环境一致的基本理念。 ??♂ 博主座右铭向阳而生我还在路上 —————————————————————————————— ??博主想说将持续性为社区输出自己的资源同时也见证自己的进步 —————————————————————————————— ??♂ 如果都看到这了博主希望留下你的足迹【??收藏??点赞评论】 ——————————————————————————————