【知识问题】关于CORS



  • 1.Cors的作用除了安全,是否有限制访问来源的作用?
    2.想请问关于cors的header是浏览器给加上的么?
    3.尝试用socket.io,前后端都跑在localhost上但port不一样,也算是跨域么?
    4.尝试解决的时候,所有都允许访问设置的("*"),set header如下成功
    res.setHeader(‘Access-Control-Allow-Origin’, “http://”+‘localhost’+’:8080’);
    res.setHeader(‘Access-Control-Allow-Methods’, ‘GET, POST, OPTIONS, PUT, PATCH, DELETE’);
    res.setHeader(‘Access-Control-Allow-Headers’, ‘X-Requested-With,content-type’);
    res.setHeader(‘Access-Control-Allow-Credentials’, true);

    但是再少了最后一刚true那个的时候还是会被拒绝。想确认下,好像是浏览器拒绝了response而不是server拒绝了请求,是这样么?如果是原因是什么呢?

    多谢多谢。



  • 这个问题可以讲很多, 我大致介绍一下, 会花比较长的时间. 具体的信息, 我会在最后给出一点链接和关键词, 大家可以做伸展阅读. 有些词我的确是不懂中文的翻译, 为了准确只好用英文代替, 大家担待.

    要讲清楚CORS的问题, 我们首先需要弄清楚如下问题:

    1. 谁做的AJAX request?
      a. 当我们在浏览器中输入网址www.bittiger.io的时候, 浏览器经过DNS查询等步骤最终向bittiger.io的服务器发送请求, 要求其返回HTML页面.
      b. 服务器返回HTML页面给我们的浏览器
      c. 浏览器发现HTML页面文件中需要其他资源, 比如CSS 文件, JS文件等等, 他根据HTML中这些文件的链接, 去获取这些文件.
      所以, 是浏览器做的AJAX request. 即使是JS代码中做出的AJAX请求, 也是使用了浏览器的接口做AJAX请求.

    2. 什么是同源?
      同一个URL scheme (http/https 等), 同一个host name, 同一个port(端口).

    3. 什么是同源策略?
      同源策略是一种政策(policy). 简单来说就是, 只有当page A 和 page B是同源的时候, 浏览器才允许page A (中的script)访问page B中的数据.

    4. 为什么要使用同源策略?
      安全原因. 举个栗子: 大家可能会使用网上银行, 又会访问一些迷之网站. 大家可能不是非常信任这些迷之网站, 肯定就不愿意这些迷之网站上面的代码获取我们网上银行的信息.
      这个安全原因在如今普遍使用cookies的网络世界尤为重要, 特别是cookies中会有一些涉及authentication(身份验证)的内容, 我们是肯定不愿意迷之网站去获取的.

    5. 但是!..
      但是啊, 现在越来越多的网站是使用多源的. 举个栗子, 一个小网站可能做到将网站中的所有资源(img, style, script等等)都放到一个服务器上, 但当网站越做越大, 程序员们就会考虑把这些资源放到不同的服务器上, 让他们专门做这些事情了 (感兴趣的同学可以搜索下CDN, 这个是完全跑题了). 那, 同源协议怎么办?
      所以现代的服务器, 对于一些资源比如img, style, script, 都是允许跨域引用的(严格上来说其实是不符合同源协议). 当然只是引用而已. 没法真正读取的.

    6. 但是AJAX请求这样需要读取内容的又怎么办?
      跨来源资源共享(CORS)就是为了解决这个问题. 这是W3C推荐的一个浏览器规范. 大致上的意思就是, 通过在request上面加一些headers, 让服务器描述 “谁可以读取我的信息”. 在会改变用户数据的一些情况下, 浏览器在发取请求之前, 甚至还会发一个OPTION请求, 问一问服务器它能不能访问.
      (CORS的内容可以讲非常多, 感兴趣的可以看最后的链接)

    7. 所以… 回答你的问题…

    @zhangyichi12【知识问题】关于Cors 中说:

    1.Cors的作用除了安全,是否有限制访问来源的作用?

    same-origin policy同源协议是通过限制某网页上的script去发送不同来源的请求; CORS是W3C处于在安全性和可用性之中达到一个平衡点, 所推荐的浏览器处理此类请求的技术方案.

    2.想请问关于cors的header是浏览器给加上的么?

    大部分的headers是服务器加上的. 因为数据是服务器的, 只有服务器有权利说"谁可以看我的数据". 但是浏览器(XHR)是会加上一些request headers比如ORIGIN. 详细可以看这里.

    3.尝试用socket.io,前后端都跑在localhost上但port不一样,也算是跨域么?

    是的.

    4.尝试解决的时候,所有都允许访问设置的("*"),set header如下成功
    res.setHeader(‘Access-Control-Allow-Origin’, “http://”+‘localhost’+’:8080’);
    res.setHeader(‘Access-Control-Allow-Methods’, ‘GET, POST, OPTIONS, PUT, PATCH, DELETE’);
    res.setHeader(‘Access-Control-Allow-Headers’, ‘X-Requested-With,content-type’);
    res.setHeader(‘Access-Control-Allow-Credentials’, true);

    但是再少了最后一刚true那个的时候还是会被拒绝。想确认下,好像是浏览器拒绝了response而不是server拒绝了请求,是这样么?如果是原因是什么呢?

    你判断的没错. Allow-Credentials的意思是说, 允许response里面的credentials被请求者阅读. 这是CORS协议的一部分, 如果这个是false, browser不会让请求者读到信息.

    这个内容的确是和课程关系不算太大, 而且内容真的可以说很多. 我就回答到这里, 感兴趣的同学可以看看伸展阅读, 或者请教我们永远的老师 - 互联网.


    延伸阅读:



  • @兰_绛 多谢!!
    3.中是指当迷之网站尝试访问cookie中银行网站信息时,因为银行和迷不同源,所以获取不到?
    5.中加headers是浏览器自动加的么?



  • @zhangyichi12【知识问题】关于Cors 中说:

    @兰_绛 多谢!!
    3.中是指当迷之网站尝试访问cookie中银行网站信息时,因为银行和迷不同源,所以获取不到?

    不单单是cookies, 还有返回的response. (浏览器不会允许迷之网站去读到来源为银行的任何信息 - 如果浏览器遵循同源协议的话)

    5.中加headers是浏览器自动加的么?

    如上. 具体的信息可以看这里 - https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
    大致上, 大多数的headers 是服务器加的 (response headers), 少数的headers是浏览器(或者请求者)加的(request headers).



  • @兰_绛 多谢这么详细的回答。会认真看材料的。:)



  • @zhangyichi12【知识问题】关于Cors 中说:

    @兰_绛 多谢这么详细的回答。会认真看材料的。:)

    不客气, 我明天还有一小时的office hour我会在论坛上回答大家的问题 =D


 

与 BitTiger Community 的连接断开,我们正在尝试重连,请耐心等待