理论与实践相结合彻底理解CORS _CORS

跨域问题一直是面试中的经典问题，不管是前端老鸟还是新鸟都碰到过。其中针对跨源Ajax请求中有一个终极解决办法——CORS（跨源资源共享）大家肯定也不陌生，一说这个名词，我们就会哗啦哗啦说出来一套又一套的理论知识，但是这些理论知识很多我们做的仅仅是去背诵，很少去验证每一个理论点，本节我们将通过实验的方式去验证这些理论点，通过理论与实践相结合的方式彻底理解CORS 。

一、理论知识

既然是CORS，背背这些理论点肯定不为过吧，我就用三幅图对这个理论进行一些简单的总结

1.1 请求类型1.1.1 简单请求

文章插图

1.1.2 非简单请求

文章插图

1.2 请求如何带上Cookie信息

文章插图

二、实验

为实验做好前期准备工作，包含一个html页面和一个服务器程序，其中html访问网址为http://127.0.0.1:8009; 服务器监听端口为：8010.

html页面初始代码

<!DOCTYPE html><html><head><meta charset="UTF-8"><title>test CORS</title></head><body>CORS<script src=https://www.isolves.com/it/cxkf/bk/2021-03-24/"https://code.bdstatic.com/npm/axIOS@0.20.0/dist/axios.min.js">

服务器端代码（用express框架）

const express = require('express');const App = express();app.get('/', (req, res) => {console.log('get请求收到了！！！');res.send('get请求已经被处理');})app.listen(8010, () => {console.log('8010 is listening')});

2.1 实验一

实验目的:
非同源会产生跨域问题
跨域是浏览器对响应拦截造成的

首先来看看浏览器控制台内容

文章插图

控制台内容显示报错，报错内容是跨域，这是因为端口不同（一个8009一个8010），两者不同源，所以导致跨域，验证了实验目的1.

紧接着来瞅瞅服务器控制台打印了啥内容

文章插图

控制台内容打印了接收到了get请求，则证明浏览器的请求发出了并被服务器端正常接收，从侧面证明了跨域是浏览器对响应进行了拦截，从而验证了实验目的2.

2.2 实验二

实验目的
服务器配置
Access-Control-Allow-Origin会解决跨域问题
浏览器通过响应头中是否包含
Access-Control-Allow-Origin这个响应头的值与请求头中Origin是否相等来确定是否能够进行跨域访问

首先来搂一眼请求头

文章插图

紧接着再来搂一眼响应头

文章插图

按照理论来说，请求头中的Origin字段表示本次请求来自哪个源（协议+域名+端口），服务器根据这个值来决定是否同意这次请求。如果Origin指定的源不在许可范围内，服务器会返回一个正常的HTTP回应。目前并没有修改，还处于报错状态，该响应确实是一个正常响应，不包含
Access-Control-Allow-Origin字段，但是这也不足以说服我浏览器是通过验证该字段来确实是否允许跨域请求。所以紧接着需要做一个对比试验，通过修改服务端的代码后观察响应头内容。

从最简单的修改开始，直接将响应头中加入Access-Control-Allow-Origin=“http://127.0.0.1:8009” 字段，理论上来说此时会允许所有的跨域请求。

服务端代码修改后内容

app.get('/', (req, res) => {console.log('get请求收到了！！！');res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:8009');res.send('get请求已经被处理');})