6.跨域资源共享CORS

Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell browsers to give a web application running at one origin, access to selected resources from a different origin.

它允许浏览器向跨源服务器发出XMLHttpRequest,从而克服了AJAX只能同源使用的限制。CORS也已成为主流的跨域解决方案。


浏览器将CORS跨域请求分为简单请求和非简单请求,浏览器对这两种的处理是不一样的。

只要同时满足两个条件,就属于简单请求:

(1)使用下列方法之一:

head/get/post

(2)请求的Heder是

Accept

Accept-Language

Content-Language

3)Content-Type只限于三个值:

application/x-www-form-urlencoded

multipart/form-data

text/plain


对于简单请求浏览器直接发出CORS请求,具体就是在头信息之中增加一个Origin字段

GET /cors HTTP/1.1

Origin: http://api.bob.com

Host: api.alice.com

Accept-Language: en-US

Connection: keep-alive

User-Agent: Mozilla/5.0...

上面的头信息中,Origin字段用来说明本次请求来自哪个源(协议 + 域名 + 端口),服务器根据这个值决定是否同意这次请求。


CORS请求设置的响应头字段,都以 Access-Control-开头:

1)Access-Control-Allow-Origin:必选

它的值要么是请求时Origin字段的值,要么是一个*,表示接受任意域名的请求。

2)Access-Control-Allow-Credentials:可选

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

需注意的是:由于同源策略的限制,所读取的cookie为跨域请求接口所在域的cookie,而非当前页。

3)Access-Control-Expose-Headers:可选

CORS请求时,XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段:Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段,就必须在Access-Control-Expose-Headers里面指定。上面例子指定,getResponseHeader('FooBar')可以返回FooBar字段的值。


非简单请求是那种对服务器有特殊要求的请求,比如请求方法是PUT或DELETE,或者Content-Type字段的类型是application/json。非简单请求的CORS请求,会在正式通信之前,增加一次HTTP查询请求,称为"预检"请求(preflight)。

预检请求用的请求方法是OPTIONS,表示这个请求是用来询问的。请求头信息里面,关键字段是Origin,表示请求来自哪个源。除了Origin字段,预检请求的头信息包括两个特殊字段。

OPTIONS /cors HTTP/1.1

Origin: http://api.bob.com

Access-Control-Request-Method: PUT

Access-Control-Request-Headers: X-Custom-Header

Host: api.alice.com

Accept-Language: en-US

Connection: keep-alive

User-Agent: Mozilla/5.0..

1)Access-Control-Request-Method:必选

用来列出浏览器的CORS请求会用到哪些HTTP方法,上例是PUT。

2)Access-Control-Request-Headers:可选

该字段是一个逗号分隔的字符串,指定浏览器CORS请求会额外发送的头信息字段,上例是X-Custom-Header。


服务器收到预检请求,检查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后,确认允许跨源请求,就可以做出回应

HTTP回应中,除了关键的是Access-Control-Allow-Origin字段,其他CORS相关字段如下:

1)Access-Control-Allow-Methods:必选

它的值是逗号分隔的一个字符串,表明服务器支持的所有跨域请求的方法。注意,返回的是所有支持的方法,而不单是浏览器请求的那个方法,这是为了避免多次预检请求。

2)Access-Control-Allow-Headers

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

3)Access-Control-Allow-Credentials:可选

该字段与简单请求时的含义相同。

4)Access-Control-Max-Age:可选

用来指定本次预检请求的有效期,单位为秒。


普通跨域请求只服务端设置Access-Control-Allow-Origin即可,前端无须设置。若要带cookie请求,前后端都需要设置。

1、 前端设置:

1.)原生ajax

// 前端设置是否带cookie

xhr.withCredentials =true;


示例代码:

var xhr = new XMLHttpRequest(); 

// 前端设置是否带cookie

xhr.withCredentials =true;

xhr.open('post', 'http://www.domain2.com:8080/login', true);

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

xhr.send('user=admin');

xhr.onreadystatechange = function() {

    if (xhr.readyState == 4 && xhr.status == 200) {

        alert(xhr.responseText);

    }

};


2.)jQuery ajax

$.ajax({

    ...

   xhrFields: {

       withCredentials: true    // 前端设置是否带cookie

   },

   crossDomain: true,  // 会让请求头中包含跨域的额外信息,但不会含cookie

    ...

});


3.)vue框架

a.) axios设置:

axios.defaults.withCredentials = true

b.) vue-resource设置:

Vue.http.options.credentials = true


2、 服务端设置:

若后端设置成功,前端浏览器控制台则不会出现跨域报错信息,反之,说明没设成功。

1.)Java后台:

/*

* 导入包:import javax.servlet.http.HttpServletResponse;

* 接口参数中定义:HttpServletResponse response

*/

// 允许跨域访问的域名:若有端口需写全(协议+域名+端口),若没有端口末尾不用加'/'

response.setHeader("Access-Control-Allow-Origin", "http://www.domain1.com");

// 允许前端带认证cookie:启用此项后,上面的域名不能为'*',必须指定具体的域名,否则浏览器会提示

response.setHeader("Access-Control-Allow-Credentials", "true");

// 提示OPTIONS预检时,后端需要设置的两个常用自定义头

response.setHeader("Access-Control-Allow-Headers", "Content-Type,X-Requested-With");

2.)Nodejs后台示例:

var http = require('http');

var server = http.createServer();

var qs = require('querystring');

server.on('request', function(req, res) {

    var postData = '';

    // 数据块接收中

    req.addListener('data', function(chunk) {

        postData += chunk;

    });

    // 数据接收完毕

    req.addListener('end', function() {

        postData = qs.parse(postData);

        // 跨域后台设置

        res.writeHead(200, {

            'Access-Control-Allow-Credentials': 'true',    // 后端允许发送Cookie

            'Access-Control-Allow-Origin': 'http://www.domain1.com',    // 允许访问的域(协议+域名+端口)

            /*

            * 此处设置的cookie还是domain2的而非domain1,因为后端也不能跨域写cookie(nginx反向代理可以实现),

            * 但只要domain2中写入一次cookie认证,后面的跨域接口都能从domain2中获取cookie,从而实现所有的接口都能跨域访问

            */

            'Set-Cookie': 'l=a123456;Path=/;Domain=www.domain2.com;HttpOnly'  // HttpOnly的作用是让js无法读取cookie

        });

        res.write(JSON.stringify(postData));

        res.end();

    });

});

server.listen('8080');

console.log('Server is running at port 8080...');


cors要允许*.qq.com访问怎么设置?有一个a.qq.com的图片发到百度贴吧上,会不会带上那个cookie?

能说说同源策略吗,那如果是直接请求ip会有同源策略吗,如果一个域名对应多个ip的情况呢?

你可能感兴趣的:(6.跨域资源共享CORS)