7-CORS跨域限制以及预请求验证

自定义的头在跨域请求时不被允许的

        fetch('http://localhost:8887/',{
            method:'POST',
            headers:{
                // 自定义头
                'X-Test-Cors':'123'
            }
        })

自定义的头在跨域请求时不被允许的

---

CORS预请求限制

跨域时默认允许的方法 ：

• GET
• HEAD
• POST

允许Content-Type

• text/plain
• multipart/form-data
• application/x-www-form-urlendoded

其他限制

• 请求头限制
• XMLHttpRequestUpload对象均没有注册任何事件监听器
• 请求中没有使用ReadableStream对象

---

什么是预请求

浏览器根据Response Headers判断请求是否允许

31ABEC72-7A20-4D65-AAE0-E51B99278EF9.png

解决：设置允许访问的自定义请求头

http.createServer(function(request,response){
    console.log('request come',request.url)
    response.writeHead(200,{
        'Access-Control-Allow-Origin':'*',
        // 设置允许访问的自定义请求头
        'Access-Control-Allow-Headers':'X-Test-Cor'

    })
    response.end('123')
}).listen(8887)

---

浏览器跨域请求之预请求操作：Request Method:OPTIONS，首先发送这个请求，服务端可以根据不同的method进行不同的操作，允许接下来实际发送的请求。通过这个OPTION来获得服务端允许的任何请求，然后再实际发送设置的请求。

---

浏览器为什么设置请求限制？
因为浏览器希望在网页进行跨域请求操作的时候是保证服务端的安全的，不允许任何随便进行跨域，不允许随便的方法进行跨域，以防数据被恶意篡改。所以提供这些限制之后，就可以进行一些非常有利的判断。

http.createServer(function(request,response){
    console.log('request come',request.url)
    response.writeHead(200,{
        // 设置允许跨域的访问地址
        'Access-Control-Allow-Origin':'*',
        // 设置允许访问的自定义请求头
        'Access-Control-Allow-Headers':'X-Test-Cors',
        // 设置允许跨域的methods
        'Access-Control-Allow-Methods':'POST,Put,Delete',
        // 允许以上三个方式进行跨域的最长时间，1000秒内不需要发送预请求验证了
        'Access-Control-Max-Age':'1000'
    })
    response.end('123')
}).listen(8887)