美文网首页网络原理
网络原理4.跨域资源共享,跨域问题解决方案

网络原理4.跨域资源共享,跨域问题解决方案

作者: ygxing | 来源:发表于2019-06-10 17:33 被阅读0次

    1. 什么是跨域

    • 跨域是由于浏览器的同源策略造成的
    • 域名(或者IP),端口,协议只要有一个不同,便是跨域
    1.1 同源策略

    限制浏览器请求接口域名(或者IP),端口,协议都相同

    • iframe同源:禁止对不同源的页面DOM进行操作
    • XmlHttpRequest同源,禁止ajax跨域

    2. 为什么浏览器限制跨域

    为了限制浏览器的行为,防止CSRF(Cross Site Request Forgery 跨域请求伪造)攻击

    CSRF攻击原理
    1. 登录受信任网站A,并在本地生成Cookie
    2. 在没有退出A的情况下,访问恶意网站
    3. 恶意网站发起一个访问A站点的ajax请求
    4. 允许跨域的话,恶意网站的请求就可以获取到A站点的Cookie,从而请求成功

    3. CORS:Cross-origin Resource Sharing(跨资源共享)

    跨资源共享标准新增了一组HTTP首部,允许服务器指定哪些站点可以跨域访问服务器资源

    1. Access-Control-Allow-Origin
      • 指示请求的资源能共享给哪些域
    2. Access-Control-Allow-Credentials
      • 是否允许发送Cookie,默认情况下,CORS请求中不携带Cookie
    3. Access-Control-Allow-Headers
      • 用在对预检请求的响应中,指示实际的请求中可以使用哪些 HTTP 头。
    4. Access-Control-Allow-Methods
      • 指定对预检请求的响应中,哪些HTTP方法允许访问请求的资源。
    5. Access-Control-Expose-Headers
      • 指示哪些 HTTP 头的名称能在响应中列出
    6. Access-Control-Max-Age
      • 指示预请求的结果能被缓存多久
    7. Access-Control-Request-Headers
      • 用于发起一个预检请求,告知服务器正式请求会使用那些 HTTP 头
    8. Access-Control-Request-Method
      • 用于发起一个预请求,告知服务器正式请求会使用哪一种 HTTP 请求方法
    9. Origin
      • 指示获取资源的请求是从什么域发起的

    4. 预检请求(prelight request)

    对于那些可能产生问题的HTTP请求,浏览器首先使用OPTIONS方法发起一个预检请求,检测浏览器所支持的请求方法和浏览器是否支持跨域, 服务器允许之后,才会发起真正的HTTP请求

    4.1 简单请求
    简单请求
    • 请求方法是GET,HEAD,POST
    • CROS安全的首部集合:
      • Accept
      • Accept-Language
      • Content-Language
      • DRP
      • DownLink
      • Save-Data
      • Viewport-Width
      • Width
      • Content-Type(取值范围: text/plain, multipart/form-data, application/x-www-form-urlencoded)
    • 请求中任意的XMLHttpRequestUpload对象均没有注册任何事件监听器
    • XMLHttpRequestUpload对象可以使用XMLHttpRequest.upload属性访问
    • 请求中没有使用ReadableStream对象
    4.2 预检请求
    预检请求
    • 请求方法使用了PUT, DELETE,CONNECT, OPTIONS, TRACE, PATCH
    • 使用了CROS安全的首部集合之外的其他首部字段
    • Content-Type没有使用CROS限制的集合
    • 请求中的XMLHttpRequestUpload对象注册了任意多个事件监听器
    • 请求中使用了ReadableStream对象
    4.3 预检请求的作用
    1. 检测服务器是否支持所请求的方法
    2. 检测浏览器是否跨域

    5. 跨域问题的解决

    5.1 使用jsonp
    5.2 服务器端解决
    • 所有的OPTIONS都允许访问
    • 设置Access-Control-Allow-Origin,Access-Control-Allow-Methods,Access-Control-Allow-Credentials,Access-Control-Allow-Headers等响应头
    • 浏览器端,ajax请求,添加两个参数
      • crossDomain: true,
      • xhrFields: { withCredentials: true },
    5.3 Spring为例解决跨域问题
    • 方案1: 在Controller加上@CrossOrigin注解
    • 方案2: 自定义一个拦截器或者过滤器,实现以下代码
    String method = request.getMethod(); 
    if ("OPTIONS".equals(method.toUpperCase())) { 
        response.setHeader("Access-Control-Allow-Headers", "*"); 
        response.setHeader("Access-Control-Allow-Methods", "*"); 
        response.setStatus(200); 
        response.setContentType("text/plain;charset=utf-8"); 
        response.setCharacterEncoding("utf-8"); 
        return true; 
    } 
    response.setHeader("Access-Control-Allow-Origin", "*"); 
    
    //如果使用了SpringSecurity
    //还需要在SpringSecurity的配置中加上以下代码
    antMatchers(HttpMethod.OPTIONS).permitAll();
    

    相关文章

      网友评论

        本文标题:网络原理4.跨域资源共享,跨域问题解决方案

        本文链接:https://www.haomeiwen.com/subject/mlktfctx.html