uni-app启动h5项目通过ip访问时静态资源是https，请问怎么改成http

发布于 1周前 作者 songsunli 来自 Uni-App

uni-app启动h5项目通过ip访问时静态资源是https，请问怎么改成http

项目启动问题

  1. 启动本地项目，访问 Network: http://192.168.76.113:5173/，打开空白
  2. 打开控制台报错：192.168.76.113/:54 GET https://192.168.76.113:5173/src/main.ts net::ERR_SSL_PROTOCOL_ERROR
  3. vite 和 manifest 都改成 “https”: false 了

vite 配置

server: {  
    host: '0.0.0.0',  
    headers: {  
      "Access-Control-Allow-Private-Network": "*"  
    },  
    "https": false  
}

manifest.json 配置

"devServer" : {  
 "https" : false  
}
  1. SDK 版本 3.7.11

环境信息

项 信息
开发环境 未提供
版本号 SDK 3.7.11
项目创建方式 未提供

Harmonyos Next教程
2 回复

看看你index.html里是不是有<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">，这个是把http改成https的


在uni-app项目中，当你通过IP地址启动H5项目并希望将静态资源的加载协议从HTTPS改为HTTP时，可以通过配置和代码调整来实现。以下是一个基本的操作指南和示例代码，帮助你完成这一需求。

步骤一：修改项目配置

首先，确保你的uni-app项目配置允许你通过IP地址访问。这通常在manifest.json文件中配置。

{
  "mp-weixin": { // 示例平台配置，具体平台可能有所不同
    "appid": "your-app-id",
    "setting": {
      "urlCheck": false // 禁用域名校验，允许IP访问（注意：生产环境不建议这样做）
    }
  }
}

步骤二：调整静态资源加载协议

由于uni-app在构建H5项目时，通常会根据开发环境或生产环境自动选择协议（HTTP/HTTPS），你可能需要在代码中显式指定协议。

方法一：在静态资源路径中直接指定协议

在你的.vue文件中，当引用静态资源时，可以直接在URL中指定http协议：

<template>
  <div>
    <img src="http://your-ip-or-domain/path/to/your/image.png" alt="Example Image">
  </div>
</template>

方法二：使用公共方法动态设置协议

如果项目中有很多静态资源需要调整，可以创建一个公共方法来生成资源URL，该方法根据环境变量或配置选择协议。

// utils/urlUtils.js
export function getResourceUrl(relativePath) {
  // 根据环境或配置选择协议，这里简单设置为http
  const protocol = 'http://';
  const baseUrl = 'your-ip-or-domain';
  return `${protocol}${baseUrl}${relativePath}`;
}

然后在组件中使用这个方法：

<template>
  <div>
    <img :src="getImageUrl('path/to/your/image.png')" alt="Example Image">
  </div>
</template>

<script>
import { getResourceUrl } from '@/utils/urlUtils';

export default {
  methods: {
    getImageUrl(relativePath) {
      return getResourceUrl(relativePath);
    }
  }
}
</script>

注意事项

  1. 安全性：在生产环境中直接使用HTTP可能带来安全风险，如中间人攻击。确保你了解这些风险，并在必要时采取额外的安全措施。
  2. 跨域问题：如果你的资源服务器和前端服务器不在同一个域下，可能还需要处理跨域资源共享（CORS）问题。
  3. 开发环境：在开发环境中，可以直接使用上述方法，但在部署到生产环境时，请考虑使用HTTPS以提高安全性。

通过上述步骤，你应该能够成功地将uni-app H5项目中静态资源的加载协议从HTTPS改为HTTP。

回到顶部