Access to script at ‘file:///xxx.xxx’ from origin ‘null‘ has been blocked by CORS policy .... 解决办法

最新推荐文章于 2024-12-17 15:01:57 发布

潮汐未见潮落

最新推荐文章于 2024-12-17 15:01:57 发布

阅读量1.1k

点赞数 2

CC 4.0 BY-SA版权

文章标签：前端 javascript 开发语言

本文链接：https://blog.csdn.net/qq_52855464/article/details/140586953

问题描述

编辑单 HTML 文件，通过 script 引入 JS 代码，JS 使用 ES Module 模块化导出，控制台发生CORS 跨域报错

问题代码

下面展示简单的代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./index.js" type="module"></script>
</head>
<body>
  <div>
    <input type="file">
  </div>
</body>
</html>

index.js

import { captureFrame } from './captureFrame.js';

const inp = document.querySelector('input[type=file]');

inp.onchange = (e) => {
  const file = e.target.files[0];
  const result = captureFrame(file, 1);
};

captureFrame.js

export function captureFrame (videoFile, time = 0) {
  const video = document.createElement('video');
  video.src = URL.createObjectURL(videoFile);
  console.log(video.src);
}