在本地loscalhost运行navigator.clipboard.writeText是没问题的，但是使用本地电脑的ip地址访问运行的项目就会出现问题： Cannot read properties

在本地（localhost）开发时，navigator.clipboard.writeText 在 localhost 上可以正常工作，但当你通过本地计算机的 IP 地址访问项目时出现 Cannot read properties of undefined (reading 'writeText') 的问题，这是因为浏览器对 Clipboard API 的使用有严格的安全性要求。

原因分析

1. 安全上下文的限制：

   • localhost 被浏览器视为安全上下文，即使是通过 HTTP 访问的。因此，在 localhost 环境下，navigator.clipboard.writeText 是可以使用的。
   • 当你通过本地 IP 地址访问时，例如 http://192.168.x.x:port，浏览器可能不再视这个环境为安全上下文，因为这是一个未加密的 HTTP 连接。此时，navigator.clipboard 对象可能是 undefined，所以你会遇到这个问题。

2. IP 地址 vs. 域名：

   • 浏览器通常会对本地 IP 地址（即使用 HTTP 协议访问的非 localhost 地址）施加更多的限制，尤其是涉及剪贴板操作、地理定位等潜在敏感操作。这是为了防止可能的跨站点攻击。（如，点入木马链接）

解决方法

1. 使用 HTTPS：

   • 配置你的本地开发服务器使用 HTTPS，而不是 HTTP，这样无论是通过 localhost 还是本地 IP 地址访问，浏览器都会认为它是一个安全的上下文。
   • 在本地设置 HTTPS 可能需要你生成一个自签名证书，这在开发环境中是可以接受的。

2. 继续使用 localhost：

   • 如果你的测试或开发工作不依赖于本地 IP 地址，继续使用 localhost 进行开发和调试，因为它默认被认为是安全上下文。

3. 使用反向代理：

   • 你可以设置一个反向代理服务器，通过 HTTPS 访问你的本地 IP 地址，从而满足浏览器对安全上下文的要求。

如何设置本地 HTTPS 服务器

如果你决定使用 HTTPS 来解决问题，可以参考以下步骤：

1. 创建自签名证书（适用于开发环境）：
   • 使用 OpenSSL 或其他工具创建一个自签名证书。
2. 配置开发服务器使用 HTTPS：
   • 大多数开发服务器（如 webpack-dev-server、vite 等）都支持 HTTPS 配置，你只需要将生成的证书和密钥文件添加到配置中。