跨域

跨域

跨域请求

CORS需要浏览器和服务器同时支持。

浏览器将CORS请求分成两类：简单请求（simple request）和非简单请求（not-so-simple request），只要同时满足以下两大条件，就属于简单请求，否则为非简单请求。

(1) 请求方法是以下三种方法之一：
HEAD
GET
POST

(2) HTTP的头信息不超出以下几种字段：
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三个值application/x-www-form-urlencoded、multipart/form-data、text/plain

示例代码 服务器：

var express = require('express');
var app = express();

// 解决跨域
app.all('*', function(req, res, next) {
    console.log(req.headers.origin);
    console.log(req.get('host'));
    res.header('Access-Control-Allow-Origin', req.headers.origin);
    // res.header('Access-Control-Allow-Headers', '*');
    res.header('Access-Control-Allow-Credentials', true);
    res.header('Access-Control-Allow-Headers', 'Content-Type, Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
    res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE, OPTIONS');

    if (req.method == 'OPTIONS') {
        res.send(200);
        // 让options请求快速返回
    } else {
        next();
    }
});


app.use('/randomNum', function(req, res) {
    res.send(String(Math.random()).slice(2));
});

浏览器：

<a href="javascript:;" onclick="req()">请求</a>
<script type="text/javascript">
    function req(){
        // window.location.reload();
        // history.go(0);
        var oAjax=new XMLHttpRequest()||new ActiveXObject("Microsoft.XMLHTTP");

        //2.连接服务器（打开和服务器的连接）
        oAjax.withCredentials = true;
        oAjax.open('GET', 'http://127.0.0.1:3003/randomNum');

        //3.发送
        oAjax.send();
        //4.接收
        oAjax.onreadystatechange=function ()
        {
            if(oAjax.readyState==4)
            {
                if(oAjax.status==200)
                {
                    //alert('成功了：'+oAjax.responseText);
                    console.log(oAjax.responseText);
                    document.getElementById('aa').innerHTML = oAjax.responseText;
                }
            }
        };
    }
</script>

三个有关字段

  • Access-Control-Allow-Origin

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

  • Access-Control-Allow-Credentials

可选，默认为false，表示是否需要浏览器发送cookie。如果为true，浏览器端还需要设置withCredentials属性为true。 同时，Access-Control-Allow-Origin不能为星号，应设为浏览器的页面地址，即origin。

  • Access-Control-Expose-Headers

可选，CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必需在Access-Control-Expose-Headers里面指定。可设为*，表示可接受任意的字段。

非简单请求

非简单的CORS请求，会在正式通信之前发送一个预检请求(OPTIONS)。

OPTIONS请求头信息：

Accept:*/*
Accept-Encoding:gzip, deflate, br
Accept-Language:zh-CN,zh;q=0.9,en;q=0.8
Access-Control-Request-Headers:athor
Access-Control-Request-Method:GET
Cache-Control:no-cache
Connection:keep-alive
Host:127.0.0.1:3003
Origin:http://127.0.0.1:9090

  • Origin

    • 表示请求来源地址

  • Host

    • 请求地址

  • Access-Control-Request-Method

    • 必需，表示CORS用到的方法。

  • Access-Control-Request-Headers

    • 指定浏览器CORS请求会额外发送的头信息字段。

OPTIONS请求回应：

HTTP/1.1 200 OK
X-Powered-By: Express
Access-Control-Allow-Origin: http://127.0.0.1:9090
Access-Control-Allow-Headers: *
Access-Control-Allow-Methods: PUT, POST, GET, DELETE, OPTIONS
Content-Type: text/plain; charset=utf-8
Content-Length: 2
ETag: W/"2-nOO9QiTIwXgNtWtBJezz8kv3SLc"
Date: Thu, 21 Dec 2017 02:58:31 GMT
Connection: keep-alive

  • Access-Control-Allow-Origin

    • 该字段表示可接受后面地址的请求，星号表示任何地址

如果不允许跨域，浏览器会直接报错误。

服务器回应的其他CORS相关字段：

  • Access-Control-Allow-Methods

    • 必需，表明服务器支持的所有跨域请求的方法。

  • Access-Control-Allow-Headers

    • 必需，表明服务器支持的所有头信息字段

  • Access-Control-Allow-Credentials

    • 与简单请求含义相同

  • Access-Control-Max-Age

    • 该字段可选，用来指定本次预检请求的有效期，单位为秒。

http://www.ruanyifeng.com/blog/2016/04/cors.html 浏览器同源政策及其规避方法

PreviousWebSocketNextCSS

Last updated