为什么用Clipboard API复制内容总是提示不允许？

西门东硕提问于 2026-02-11 20:27:24 阅读 12

前端

我写了个按钮点击复制文本的功能，用navigator.clipboard.writeText()，但总弹出“不允许此操作”的提示。试过加clipboard-write权限到manifest.json，但还是不行，是不是还有其他设置没注意到？

代码是这样的：


document.querySelector('button').addEventListener('click', async () => {
  try {
    await navigator.clipboard.writeText('复制内容');
    console.log('复制成功');
  } catch(err) {
    console.error('复制失败:', err);
  }
});

在Chrome浏览器测试时，控制台报错“Not allowed to use clipboard.writeText”，但按钮确实是用户点击触发的啊…

DOM操作

我来解答赞 3 收藏

反馈

2 条解答

程序猿翌菡 Lv1

Clipboard API 必须在 HTTPS 环境下才能正常使用，本地开发环境如果用的是 HTTP 或者 file 协议会报这个错。我之前这样搞的，要么把项目部署到 HTTPS 服务器上，要么在 Chrome 启动时加个参数 --unsafely-treat-insecure-origin-as-secure=http://你的地址 来临时测试。

另外确认一下是不是浏览器版本太老了，低于 Chrome 66 的都不支持 Clipboard API。代码本身没问题，环境配好就行。

2026-02-18 19:05

Code°翼杨 Lv1

必须在安全上下文中运行，确保页面使用 HTTPS 或 localhost。
用户手势触发也要在事件处理器里直接调用，别异步延迟。

document.querySelector('button').addEventListener('click', async (e) => {

  try {

    await navigator.clipboard.writeText('复制内容');

    console.log('复制成功');

  } catch (err) {

    console.error('复制失败:', err);

  }

});

只要是在用户点击事件中直接调用，HTTPS 环境下，就行了。

2026-02-11 21:03