江苏龙网

  1. 主页 > 生活百科 > >

理论与实践相结合彻底理解CORS( 二 )

CORS


文章插图
 

观察到响应头中多了一行内容：
Access-Control-Allow-Origin：http://127.0.0.1:8009 字段，再看看响应内容，确实有消息返回了，内容如下：

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

文章插图
 
  1. 只验证了Origin和Access-Control-Allow-Origin中内容响应，若内容不同又会有什么现象呢？
服务端代码进一步修改
app.get('/', (req, res) => {console.log('get请求收到了！！！');res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:8008');res.send('get请求已经被处理');})
响应头内容

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

文章插图
 
此时浏览器控制台报错了，出现了跨域问题

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

文章插图
 
通过该实验可以验证通过配置
Access-Control-Allow-Origin字段可以解决跨域问题；此外，浏览器是通过检查响应头中Access-Control-Allow-Origin字段的值与Origin的值是否相等来确定是否允许跨域访问的 。通过该实验达到了我们实验的目的 。
2.3 实验三
实验目的 验证CORS请求默认不发送Cookie信息，如果要把Cookie发送到服务器，一方面要服务器同意（通过指定
Access-Control-Allow-Origin字段且Access-Control-Allow-Origin需要指定具体域名）；另一方面浏览器请求中必须带上withCredentials字段 。
  1. 通过观察请求头（看实验一中请求头），并不包含Cookie信息
  2. 代码修改
index.html页面进行修改
axios('http://127.0.0.1:8010', {method: 'get',withCredentials: true}).then(console.log)
服务器端代码修改
app.get('/', (req, res) => {console.log('get请求收到了！！！');console.log('cookie 内容为', req.headers.cookie);res.setHeader('Access-Control-Allow-Origin', 'http://127.0.0.1:8009');res.setHeader('Access-Control-Allow-Credentials', true);res.cookie('test', 'test', {expires: new Date(Date.now() + 900000)});res.send('get请求已经被处理');})
  1. 再次观察请求头内容，带上了cookie

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

文章插图
 
  1. 看看服务器端有没有接收到cookie信息，控制台信息如下，确实收到了cookie信息

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

文章插图
 
按照上述进行配置发送请求过程中将会带着cookie信息，上一个配置将会报错（可以自行验证）
2.4 实验四
实验目的
验证非简单请求会增加一次预检请求
预检请求是Options请求
请求头中会携带非简单请求的请求方法（
Access-Control-Request-Methods）和头信息（Access-Control-Request-Headers），预检请求的响应头信息中Access-Control-Allow-Methods和Access-Control-Allow-Headers与上述请求头中的信息匹配才可以发送正常的CORS请求 。
  1. 第一步肯定是要修改代码了
index.html代码
axios('http://127.0.0.1:8010', {method: 'post',headers: {'Content-Type': 'application/json'},data: {name: 'dog'}}).then(console.log)
服务器代码修改如下
app.options('/', (req, res) => {console.log('options请求收到了！！！');res.setHeader('Access-Control-Allow-Origin', '*');res.setHeader('Access-Control-Allow-Headers', 'Content-Type');res.setHeader('Access-Control-Max-Age', 10000);res.send('options请求已经被处理');});app.post('/', (req, res) => {console.log('post请求收到了！！！');res.setHeader('Access-Control-Allow-Origin', '*');res.send('post请求已经被处理');});
  1. 修改完了代码是不是要瞅瞅结果呢？
【理论与实践相结合彻底理解CORS】先看看浏览器是不是输出了内容,确实有内容输出了

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

文章插图
 
再瞅瞅服务器输出了些什么内容


推荐阅读


上一篇：哪些人不宜吃花旗参,芦丁鸡汤做法大全哪些人不适宜饭前喝汤(哪些人不宜吃乌骨鸡汤

下一篇：5种最适合咽喉炎的水果,慢性咽炎必吃的水果