CORS原理及实现

Posted 2023-04-01

参考技术A

跨域资源共享( CORS )是一种机制，是W3C标准。它允许浏览器向跨源服务器，发出 XMLHttpRequest 或 Fetch 请求。并且整个 CORS 通信过程都是浏览器自动完成的，不需要用户参与。

而使用这种 跨域资源共享 的前提是，浏览器必须支持这个功能，并且服务器端也必须同意这种 "跨域" 请求。因此实现 CORS 的关键是服务器需要服务器。通常是有以下几个配置：

具体可看： https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS#Preflighted_requests

过程分析：

另外在 CORS 中有 简单请求 和 非简单请求 ，简单请求是不会触发 CORS 的预检请求的，而非简单请求会。

“需预检的请求” 要求必须首先使用 OPTIONS 方法发起一个预检请求到服务器，以获知服务器是否允许该实际请求。"预检请求“的使用，可以避免跨域请求对服务器的用户数据产生未预期的影响。

简单请求不会触发 CORS 的预检请求，若请求满足所有下述条件，则该请求可视为“简单请求”：

简单回答 ：

详细回答 ：

除了上面这些请求外，都是非简单请求。

若是跨域的非简单请求的话，浏览器会首先向服务器发送一个预检请求，以获知服务器是否允许该实际请求。

整个过程大概是：

这里有两点要注意：

一：

Access-Control-Request-Method 没有 s

Access-Control-Allow-Methods 有 s

二：

关于 Access-Control-Max-Age ，浏览器自身也有维护一个最大有效时间，如果该首部字段的值超过了最大有效时间，将不会生效，而是以最大有效时间为主。

还是在原本 JSONP 的那个案例上。

我在根目录下新建了一个文件夹 cors ，并往里面添加了一个 index.html 文件：

/cors/index.html

为了后面也方便调试，用 node 简单写了一个前端的本地服务和后端的本地服务。

在根目录下新建 client.js 文件，并写入：

./client.js :

在根目录下新建 index.html 文件，并写入：

./index.html :

(以上：实现了一个简单的前端路由效果)

在根目录下新建 server.js 文件，并写入：

./server.js :

并给 package.json 中配置两个启动指令：

package.json :

OK👌，来分别启动一下 npm run client 和 npm run server

并打开页面的 127.0.0.1:8000/cors （或者打开 127.0.0.1:8000 然后点击 CORS 这个 a 标签）

点击 获取name 按钮，可以看到能够正常获取到本地服务器的数据了。

接着让我们来改造一下 ./cors/index.html 中的按钮点击请求，让它变成一个非简单请求：

./cors/index.html :

此时，打开页面点击按钮会发现发送了两次 corsname 的请求：

（一）预检请求：

（二）实际请求：

对于跨域 XMLHttpRequest 或 Fetch 请求，浏览器 不会 发送身份凭证信息。如果要发送凭证信息，需要设置 XMLHttpRequest 的某个特殊标志位。

例如我们想要在跨域请求中带上 cookie ，需要满足3个条件：

所以为了模拟这个效果，让我们来写一个小小的登录+获取数据的功能吧。

首先对于web端，我新增了一个登录按钮，并且配置了一下 axios ：

./cors/index.html :

接着为了更方便的模拟后台请求，我需要在项目中安装两个中间件：

接着修改一下 server.js 的后台配置：

./server.js :

现在让我们重启一下服务，然后打开页面看看效果：

（一）点击登录：

（二）点击获取name：

（三）查看cookie：

方案一：发出简单请求(这不是废话吗...)

方案二：服务端设置 Access-Control-Max-Age 字段，在有效时间内浏览器无需再为同一个请求发送预检请求。但是它有局限性：只能为同一个请求缓存，无法针对整个域或者模糊匹配 URL 做缓存。

JSONP与CORS原理与示例

 jQuery实现JSONP

$.getJSON实现跨域

$.getJSON("http://localhost:8080/bean?callback=?", {id:2,name:‘李四‘,sex:‘男‘},

    function(data) {

alert(data.id+data.name+data.sex);

});

 

使用jquery插件jquery.jsonp.js实现跨域

$.jsonp({

 url: ‘http://localhost:8080/bean?callback=?‘,

 "success": function(data) {

  console.log(data.id+data.name+data.sex);

 },

 "error": function(d,msg) {

   console.log(data)

 }

});

View Code

JSONP只支持GET请求，不支持POST请求。

JSONP的原型：创建一个回调函数，然后在远程服务上调用这个函数并且将JSON 数据形式作为参数传递，完成回调。

将JSON数据填充进回调函数，这就是JSONP的JSON+Padding的含义。

 

原生javascript实现JSONP

<button onclick="f()">sendAjax</button>

<script>
    function addScriptTag(src){
         var script = document.createElement(‘script‘);
         script.setAttribute("type","text/javascript");
         script.src = src;
         document.body.appendChild(script);
         document.body.removeChild(script);
    }


    function func(name){
        alert("hello"+name)
    }

    function f(){
         addScriptTag("http://127.0.0.1:7766/SendAjax/")
    }
</script>

# =============================http://127.0.0.1:7766/
from django.views.decorators.csrf import csrf_exempt

@csrf_exempt


def SendAjax(request):

    import json

    print("++++++++")
    # dic={"k1":"v1"}
    return HttpResponse("func(‘yuan‘)")  # return HttpResponse("func(‘%s‘)"%json.dumps(dic))

View Code

 

 jQuery中用$.ajax实现JSONP

此外，如果说我们想指定自己的回调函数名，或者说服务上规定了固定回调函数名，我们可以使用$.ajax方法来实现，如下：

<script>

    function f(){
          $.ajax({
                url:"http://127.0.0.1:7766/SendAjax/",
                dataType:"jsonp",
                jsonp: ‘callbacks‘,
                jsonpCallback:"SayHi"
           });

       }

    function SayHi(arg){
                alert(arg);
            }

</script>
//或者：通过回调函数来处理：

<script>

    function f(){

            $.ajax({
               url:"http://127.0.0.1:7766/SendAjax/",
               dataType:"jsonp",            //必须有，告诉server，这次访问要的是一个jsonp的结果。
               jsonp: ‘callbacks‘,          //jQuery帮助随机生成的：callbacks="wner"
               success:function(data){
                   alert("hi "+data)
              }
         });

       }

</script>

View Code

  jsonp: ‘callbacks‘就是定义一个存放回调函数的键，jsonpCallback是前端定义好的回调函数方法名‘SayHi‘，server端接受callback键对应值后就可以在其中填充数据打包返回了; 

jsonpCallback参数可以不定义，jquery会自动定义一个随机名发过去，那前端就得用回调函数来处理对应数据了。利用jQuery可以很方便的实现JSONP来进行跨域访问。

跨域资源共享 CORS

CORS与JSONP的使用目的相同，但是比JSONP更强大。

CORS需要浏览器和服务器同时支持。目前，所有浏览器都支持该功能，IE浏览器不能低于IE10。

整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。

因此，实现CORS通信的关键是服务器。只要服务器实现了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

凡是不同时满足上面两个条件，就属于非简单请求。

浏览器对这两种请求的处理，是不一样的。

* 简单请求和非简单请求的区别？

   简单请求：一次请求
   非简单请求：两次请求，在发送数据之前会先发一次请求用于做“预检”，只有“预检”通过后才再发送一次请求用于数据传输。
* 关于“预检”

- 请求方式：OPTIONS
- “预检”其实做检查，检查如果通过则允许传输数据，检查不通过则不再发送真正想要发送的消息
- 如何“预检”
     => 如果复杂请求是PUT等请求，则服务端需要设置允许某请求，否则“预检”不通过
        Access-Control-Request-Method
     => 如果复杂请求设置了请求头，则服务端需要设置允许某请求头，否则“预检”不通过
        Access-Control-Request-Headers

支持跨域，简单请求

服务器设置响应头：Access-Control-Allow-Origin = ‘域名‘ 或 ‘*‘

支持跨域，复杂请求

由于复杂请求时，首先会发送“预检”请求，如果“预检”成功，则发送真实数据。

• “预检”请求时，允许请求方式则需服务器设置响应头：Access-Control-Request-Method
• “预检”请求时，允许请求头则需服务器设置响应头：Access-Control-Request-Headers