求助大佬们，vue项目怎么隐藏接口地址啊？

Question

由于是H5页面，使用浏览器的调试功能就能看到接口的真实地址，很容易被攻击，想要隐藏接口地址，在vue项目里应该怎么写啊？

Answer 1

没办法，只能后端控制好安全。要么所有参数加密

Answer 2

这个不可能的, 这个是后端的工作, 前端最多将字符加密

Answer 3

我们项目上封装了axios方法作为工具类，另外给所有的api封装了一层，在组件代码里调用api里的方法去进行的处理。这样也只是明码代码里没有url而已，实际打开调试功能看网络请求还是能看到url。

还是从后台想办法去处理比较靠谱，比如：使用IP白名单，进行参数加密、Token鉴权处理等。

Answer 4

可以考虑聚合为一个后端接口，然后请求中的所有参数进行加密。
后端接收到请求后解析加密参数，再去调用具体的业务。

这个倒这个工作也只能算是规避掉了一部分，只是看有没有人愿意付出对应的成本去读前段加密的方法了。

Answer 5

隐藏接口估计是不好弄，但是可以从防止攻击这个方面来做优化，一般都是扫描出了漏洞再做优化，或者提前做一些nginx配置,具体的可以参考下https://blog.csdn.net/just_for_that_moment/article/details/12...这篇文章

Answer 6

我们的项目里，url和请求数据都进行了加密，要前后端配合才能实现的，说实在的，这样只是加大攻击成本而已

Answer 7

要隐藏 Vue 项目中的接口地址，可以采用以下几种方法：

使用代理（Proxy）：
在 Vue 项目中，可以使用 vue.config.js 配置文件设置代理。这样做的好处是，你可以将请求转发到指定的服务器，从而隐藏真实的接口地址。例如：

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'https://your-api-server.com', // 目标 API 服务器地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};

在你的 Vue 项目中，可以使用相对路径来调用接口，例如 /api/your-endpoint，代理服务器会自动将请求转发到 https://your-api-server.com/your-endpoint。

使用环境变量（Environment Variables）：
在 Vue 项目中，可以使用环境变量来存储 API 的基本 URL。这样，你可以在不同的环境中使用不同的配置。在项目的根目录下创建 .env 文件，然后在其中添加以下内容：

VUE_APP_API_BASE_URL=https://your-api-server.com

在你的 Vue 项目中，可以使用 process.env.VUE_APP_API_BASE_URL 获取 API 的基本 URL。例如：

// api.js
const axios = require('axios');

const apiClient = axios.create({
  baseURL: process.env.VUE_APP_API_BASE_URL
});

// 调用接口
apiClient.get('/your-endpoint');

使用 Webpack 插件（Webpack Plugins）：
通过使用 Webpack 插件，例如 webpack-obfuscator，可以混淆你的代码，使得接口地址更加难以被发现。然而，这种方法并不能完全保证安全，因为有可能通过逆向工程技术仍然可以找到接口地址。
但是无论采用哪种方法，都无法完全保证接口地址不被发现。因此，建议在后端实现安全措施，如身份验证、授权和限流等，以保护你的 API。
想接单找我。