CORS-跨域资源共享 解决跨域问题

1.什么是跨域?

  a.test.com 和 b.test.com 是两个不同的域,而处于安全机制考虑,JS只能访问与所在页面同一个域(相同协议、域名、端口)的内容,但是我们在项目开发时,经常遇到一个页面的js代码,需要去访问另一个服务器上的接口,包括GET,POST,PUT等不同形式请求,这就出现了跨域问题。

2.解决跨域的几种方法。

  通过实际项目中涉及到的和网上看到别人用过的,总结一下大概有以下几种方法:

  1). document.domain

    在主域相同的时候才能使用。

  2). iframe

    这种方式已经很少见到了,很不优雅,很难控制。

  3). JSONP

    这种方式应该是有一定的能力处理跨域请求的,但是缺点也十分明显,因为原理是动态创建script标签,通过回调来获取数据,那么就是说它只能处理GET请求。而且对于请求失败的error处理也不好。

  4). web socket

    H5 新增加的一种浏览器的API。只有在支持web socket协议的服务器上才能正常工作。

  var url='ws://www.baidu.com';  //http->ws; https->wss 

  if ("WebSocket" in window) {
    console.log("WebSocket works...");
    var ws = new WebSocket(url);
    ws.onopen = function() {
      // Web Socket is connected, send data using send()
      var msg = '{"key": "test","group": "A"}';
      ws.send(msg);
      console.log("Request to open a connection... Message sent...");

    };
    ws.onmessage = function(evt) {
      var data = evt.data;
      // console.log("Message received, and it's...");
      console.log(data);
    };
    ws.onclose = function(e) {
      // websocket is closed.
      console.log("Connection is closed...");
      //console.log(e);
      connect();
    };
    ws.onerror = function(e){
      // websocket is error.
      console.log("Connection is error...");
      //console.log(e);
    }
  } else {
    // The browser doesn't support WebSocket
    console.warn("WebSocket NOT supported by your Browser...");
  }

  5).CORS

    这么多解决方法中目前最方便有效的就是这种,CORS。

    CORS是一个W3C标准,全称是"跨域资源共享"(Cross-origin resource sharing),它允许浏览器向跨源服务器,发出XMLHttpRequest请求,从而克服了AJAX只能同源的限制。

  6).在开发中经常用来解决本地跨域的一种方法是配置nginx,再转发到线上或者测试服务器。不知道这种算不算一种方法。

   http {   

    server {         

      listen          80;         

      server_name      w.dev.test.com w.test.com;         

        location ~ ^/(api|action|avatar|financing|files)/{             

        if ($host = "w.test.com"){               

          proxy_pass "https://www.test.com";             

        }             

        if ($host = "w.dev.test.com"){             

          proxy_pass "http://dev.test.com";             

        }         

      }         

      location /{ ... }

    }

  }

3.CORS 详解:

  CORS实现起来很简单,但是需要浏览器和服务器同时支持,也就是说服务器需要配置允许你跨域请求,浏览器也需要支持你能够跨域去请求资源。目前大部分浏览器都能够支持。

  1). 服务器端配置:

    Access-Control-Allow-Origin: <origin> | * // 授权的源控制

    Access-Control-Max-Age: <delta-seconds> // 授权的时间

    Access-Control-Allow-Credentials: true | false // 控制是否开启与Ajax的Cookie提交方式

    Access-Control-Allow-Methods: <method>[, <method>]* // 允许请求的HTTP Method

    Access-Control-Allow-Headers: <field-name>[, <field-name>]* // 控制哪些header能发送真正的请求

    

    response headers中与CORS请求相关的字段,都以Access-Control-开头。

    (1)Access-Control-Allow-Origin 该字段是必须的。它的值要么是请求时Origin字段的值,要么是一个*,表示接受任意域名的请求。

    (2)Access-Control-Allow-Credentials 该字段可选。它的值是一个布尔值,表示是否允许发送Cookie。默认情况下,Cookie不包括在CORS请求之中。设为true,即表示服务器明确许可,Cookie可以包含在请求中,一起发给服务器。这个值也只能设为true,如果服务器不要浏览器发送Cookie,删除该字段即可。

    (3)Access-Control-Allow-Headers 如果浏览器请求包括Access-Control-Request-Headers字段,则Access-Control-Allow-Headers字段是必需的。它也是一个逗号分隔的字符串,表明服务器支持的所有头信息字段。

    (4)Access-Control-Allow-Methods 该字段必需,它的值是逗号分隔的一个字符串,表明服务器支持的所有跨域请求的方法。注意,返回的是所有支持的方法,而不单是浏览器请求的那个方法。这是为了避免多次"预检"请求。测试中发现,如果浏览器请求中没有Access-Control-Request-Method字段,此字段可不设置。

    (5)Access-Control-Max-Age 该字段可选,用来指定本次预检请求的有效期,单位为秒。

  ***需要注意的是,如果要发送Cookie,Access-Control-Allow-Origin就不能设为星号,必须指定明确的、与请求网页一致的域名。同时,Cookie依然遵循同源政策,只有用服务器域名设置的Cookie才会上传,其他域名的Cookie并不会上传,且(跨源)原网页代码中的document.cookie也无法读取服务器域名下的Cookie。

  2). 前端

  如果前端不做任何特殊设置,正常请求跨域的域名接口是可以的,但是只能是GET,且不带有cookie。

  如果想要在request headers中带有cookie就要进行特殊的设置。

  jQuery:

    $.ajax("www.cros.com/api/data", {

      type: "GET",

      xhrFields: {

        withCredentials: true

      },

      success: function(data, status, xhr) {}

    });

  angularJs:

    $http.post(url, {withCredentials: true, ...})

    // 或者

    $http({withCredentials: true, ...}).post(...)

    // 或者

    .config(function ($httpProvider) {

      $httpProvider.defaults.withCredentials = true;

    }

  经过测试法相,jQuery中无论是GET请求还是POST请求,在请求头中是不会加上Access-Control-Request-Headers字段的,也就是说这样jQuery不需要服务器设置Access-Control-Allow-Headers。可以看到只有Host显示是跨域请求,其他的和同域没什么区别。

但是在angularJs中是不一样的,GET请求基本差不多

但是POST请求是会加上 Access-Control-Allow-Methods和Access-Control-Allow-Headers。

这时如果服务器没有设置Access-Control-Allow-Headers,就会请求失败。

 

 

参考:http://www.cnblogs.com/JChen666/p/3399951.html

   http://www.ruanyifeng.com/blog/2016/04/cors.html

     https://my.oschina.net/blogshi/blog/303758

posted @ 2016-11-25 13:43  三行代码走天下  阅读(503)  评论(0编辑  收藏  举报