問題復(fù)現(xiàn)
- 第一步的頁面，這個(gè)頁面有兩個(gè) video標(biāo)簽，他們的 src一樣
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div class="container">
<video controls width="400" height="300" src="http://localhost:3000/video.mp4" alt="" ></video>
</div>
</body>
</html>
- 為第video標(biāo)簽添加參數(shù) crossorigin=“anonymous” ,那么會(huì)報(bào)錯(cuò)?！皒xxx” has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div class="container">
<video controls width="400" crossorigin="anonymous" height="300" src="http://localhost:3000/video.mp4" alt="" ></video>
</div>
</body>
</html>
問題分析
這里的video.mp4的靜態(tài)文件服務(wù)器，服務(wù)端的代碼用 express寫的，后面會(huì)貼出，我們這里分析一下http協(xié)議。文章來源：http://www.zghlxwxcb.cn/news/detail-564483.html
HTTP/1.1 200 OK
X-Powered-By: Express
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST, GET, PUT, DELETE, HEAD
Access-Control-Max-Age: 7200
ETag: "14a75b-+3U9KJ4h8BvTNuddNn1RqzOBBfA"
Content-Type: video/mp4
Content-Length: 1353563
last-modified: Mon, 10 Jul 2023 04:05:15 GMT
Date: Mon, 10 Jul 2023 07:32:31 GMT
通過上面的response請求，我們可以看出，這里并沒有使用Cache-Control 或expires來控制瀏覽器的緩存，那么緩存的重任就落到了last-modified的肩膀上，通過查資料，我們發(fā)現(xiàn)last-modified一般是根據(jù)與現(xiàn)在的時(shí)間差的 10%來作為緩存事件，而且每個(gè)瀏覽器廠家的實(shí)現(xiàn)也不一樣。文章來源地址http://www.zghlxwxcb.cn/news/detail-564483.html
規(guī)避這個(gè)問題
- 如果一開始就添加了 crossorigin=“anonymous”，那么理論上不會(huì)遇到當(dāng)前這個(gè)問題。
- 如果一開始在沒有添加 crossorigin="anonymous"的時(shí)候，添加了 Cache-Control或 沒last-modified頭，也不會(huì)遇到這樣的問題
- 如果一旦報(bào)錯(cuò)，瀏覽器則不會(huì)發(fā)送任何http請求去糾正這個(gè)問題，js 也沒辦法控制瀏覽器去清理前端的緩存。
解決辦法
- 已經(jīng)出現(xiàn)問題的情況下，最有效的辦法是請客戶手動(dòng)的強(qiáng)制刷新，清理緩存。
- 前端代碼對報(bào)錯(cuò)的video檢測資源狀態(tài)，跳過這個(gè)資源的播放或做其他的操作。
服務(wù)端代碼
const express = require('express');
const app = express();
const path = require('path');
const fs = require('fs');
const etag = require('etag');
// Custom CORS middleware
const cors = (req, res, next) => {
const origin = req.headers.origin;
if (origin) {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'POST, GET, PUT, DELETE, HEAD');
res.setHeader('Access-Control-Max-Age', '7200');
}
next();
};
app.use(cors); // Use cors middleware for all routes
app.use(express.static('public'));
app.get('/video.mp4', function(req, res) {
const filePath = path.join(__dirname, 'public', 'v.mp4');
const stat = fs.statSync(filePath);
fs.readFile(filePath, (err, data) => {
if (err) {
console.error(err);
res.status(500).send('Server Error');
} else {
res.setHeader('ETag', etag(data));
res.setHeader('Content-Type', 'video/mp4');
res.setHeader('Content-Length', stat.size);
res.setHeader('last-modified', stat.mtime.toUTCString());
//res.setHeader('Cache-Control', 'public, max-age=10');
res.removeHeader('Connection')
res.removeHeader('Keep-Alive')
res.end(data);
}
});
});
app.listen(3000, function() {
console.log('Listening on port 3000...');
});
到了這里，關(guān)于Video標(biāo)簽添加跨域頭信息后的緩存問題的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
