[总结]跨域http请求

跨域http请求

是什么

  • 当一个资源从与该资源本身所在的服务器不同的域或端口不同的域或不同的端口请求一个资源时,资源会发起一个跨域 HTTP 请求。
  • 出于安全考虑,浏览器会限制从脚本内发起的跨域HTTP请求。
  • 当浏览器访问的资源产生跨域请求并且在不符合一定条件时浏览器会将其拦截.
  • 注意:上面说的浏览器的拦截,可能是终止请求的发送;也可能是请求正常发送,也受到响应结果,但因不符合规定,将相应结果其拦截,就当没收着(╯‵□′)╯︵┻━┻.但这时服务器是对请求进行了响应了的,所以一定要注意这里依然可能发生CSRF攻击,千万不能因感觉浏览器会帮你拦截而掉以轻心.

例如

  • www.a.com页面中的<img>标签中src=//www.b.com/a.jpg
  • a.netair.xyzb.netair.xyz提交表单
  • netair.xyz的js脚本向netair.xyz:8080get请求资源
  • 等等

浏览器的同源政策

同源的条件是什么

只有协议端口域名(包括子域名)完全相同时同源.

例如

下面与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 跨域 不同的协议 ( https )
http://store.company.com:81/dir/etc.html 跨域 不同的端口 ( 81 )
http://news.company.com/dir/other.html 跨域 不同的域名 ( news )

简单请求

使用下列方法之一:
GET
HEAD
POST
    Content-Type :
    //注:仅当POST方法的Content-Type值等于下列之一才算作简单请求
        text/plain
        multipart/form-data
        application/x-www-form-urlencoded

简单请求时浏览器会直接向服务器发起相应请求(GET、PUST等).

预检请求

使用了下面任一 HTTP 方法:
    PUT
    DELETE
    CONNECT
    OPTIONS
    TRACE
    PATCH
人为设置了对 CORS 安全的首部字段集合之外的其他首部字段。该集合为:
    Accept
    Accept-Language
    Content-Language
    Content-Type (but note the additional requirements below)
    DPR
    Downlink
    Save-Data
    Viewport-Width
    Width
 Content-Type 的值不属于下列之一:
    application/x-www-form-urlencoded
    multipart/form-data
    text/plain

当符合上述条件时,浏览器会先向服务器发送OPTION请求,如果当浏览器收到响应并通过首部字段判断条件符合时,再发起相应请求(PUT等)

OPTIONS 方法

看这里→OPTIONS

各个首部

HTTP 响应首部字段
HTTP 请求首部字段

那么默认情况下会被拦截的跨域请求如何进行呢

当跨域请求被拦截时

chrome控制台中会出现类似内容

Access to Font at 'http://buddy-1252238479.file.myqcloud.com/static/editor_md/fonts/fontawesome-webfont.woff2?v=4.3.0' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.
index.php?c=PublishNewItem:1 Access to Font at 'http://buddy-1252238479.file.myqcloud.com/static/editor_md/fonts/fontawesome-webfont.woff?v=4.3.0' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.
index.php?c=PublishNewItem:1 Access to Font at 'http://buddy-1252238479.file.myqcloud.com/static/editor_md/fonts/fontawesome-webfont.ttf?v=4.3.0' from origin 'http://localhost' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost' is therefore not allowed access.

怎样才能进行这种跨域请求呢

(这里直说我用到的方法,其他的大家自己查吧,还有很多.)
* 在被跨域请求的首部添加Access-Control-Allow-Origin字段.
例如:
当www.a.com跨域请求www.b.com时,

Access-Control-Allow-Origin: *
Access-Control-Allow-Origin: www.b.com
  • 对于我这种情况,在CDN的控制台中将此域名的高级设置中添加相应的首部就ok了.

相关资料

随便说点啥

正在自己开发个小网站,把Editor.md的静态资源放到了腾讯的对象存储并且进行CDN加速,结果遇到了这个问题,就稍微研究了一下,尝试写下学习总结.
实在是觉着哪都是重点,不知道该写出什么省略什么,有的地方就直接帖链接了……
不太会总结,慢慢进步吧,哪里不对希望得到指正,谢谢.