关于复制粘贴在本地可以操作，而在服务端报错的原因

首先我是在本地有这样的一段赋值粘贴的代码：如下：

const handleCopy = (val) => {

    if(val==='textCopy8'){
        content.value = textCopy8.value.textContent;
    }
    if(val==='textCopy7'){
        content.value = textCopy7.value.textContent;
    }
    if(val==='textCopy6'){
        content.value = textCopy6.value.textContent;
    }
    if(val==='textCopy5'){
        content.value = textCopy5.value.textContent;
    }
    if(val==='textCopy4'){
        content.value = textCopy4.value.textContent;
    }
    if(val==='textCopy3'){
        content.value = textCopy3.value.textContent;
    }
    if(val==='textCopy2'){
        content.value = textCopy2.value.textContent;
    }
    if(val==='textCopy'){
        content.value = textCopy.value.textContent;
    }
    navigator.clipboard.writeText(content.value)
    ElMessage.success('copy success')
};

在本地进行操作是成功的，但是在将代码上传到服务端再次点击操作就会报错：

原因是因为navigator.clipboard.writeText()方法是有安全限制的

关于navigator.clipboard.writeText()安全限制如下：

1. 协议限制

• HTTPS 要求：在大多数现代浏览器中，为了保障用户数据安全，navigator.clipboard API 要求在安全的上下文环境中使用，即页面必须通过 HTTPS 协议加载 。如果网页是通过 HTTP 协议加载的，浏览器会将 navigator.clipboard 设置为 null ，导致无法调用 writeText 方法，进而抛出 TypeError 错误。
• 例外情况：在本地开发时，使用 localhost 或 127.0.0.1 作为地址，浏览器会放宽这一限制，允许在 HTTP 环境下使用 navigator.clipboard ，这也是为什么在本地测试代码时可能正常，但部署到服务器上就报错的原因之一。

2. 用户交互限制

• 用户操作触发：浏览器规定，navigator.clipboard 的写操作（如 writeText ）必须在用户交互事件（如 click 、touchstart 、keydown 等）的回调函数中执行 。这样做是为了防止恶意脚本在用户不知情的情况下擅自修改剪贴板内容。如果在非用户交互事件（例如定时器 setTimeout 、setInterval 回调，或者 AJAX 请求的回调函数）中调用 navigator.clipboard.writeText ，浏览器会拒绝执行该操作，并可能在控制台报错。

3. 权限请求（部分浏览器）

• 在一些浏览器（如 Safari ）中，首次使用 navigator.clipboard 时，可能会提示用户授予网页访问剪贴板的权限。如果用户拒绝授予权限，后续对 writeText 等方法的调用就会失败。

4. 跨域限制

• 当网页涉及跨域操作时，navigator.clipboard 同样受到同源策略的限制。如果一个网页试图通过 navigator.clipboard 操作另一个不同源的页面相关数据，会被浏览器阻止，以防止数据泄露和恶意攻击。

而我的原因就是我的将这个发布在了http下，并没有发布在https中，所以就会报错