CORS跨域详解

注:此文章只为本人自己的了解,如有问题可以私聊。

一. 简介

CORS是一个W3C标准,全称是“跨域资源共享”(Cross-origin resource sharing)。CORS允许浏览器向跨源服务器发出XMLHttpRequest请求,以克服AJAX只能基于同源策略的使用限制。

先来补充个小知识

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

二. 基本使用

server.all('*',function(req,res,next){
    res.header("Access-Control-Allow-Origin","*");
    res.header("Access-Control-Allow-Credentials", true);
    res.header("Access-Control-Allow-Headers", "X-Requested-With");
    res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
    res.header("X-Powered-By",' 3.2.1');
    //为了方便返回json
    res.header("Content-Type", "application/json;charset=utf-8");
    if(req.method=="OPTIONS"){
        //让options请求快速返回,如果是预检请求直接返回200
        res.sendStatus(200);
    }else{
        next();
    }
});

以下是每个块的详解

Access-Control-Allow-Origin

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

Access-Control-Allow-Credentials

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

Access-Control-Allow-Headers

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

Access-Control-Allow-Methods

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

X-Powered-By

这个值的意义用于告知网站是用何种语言或框架编写的,可以不写。

Content-Type

避免返回的值是乱码

这次分享只是本人自己的理解,如有问题,请联系我。