Tauri2.0版本请求服务器方案，简单封装了一下，附源码

熟悉的朋友知道我最近有在做一个保存密码的软件，相关的加密方案之前也分享过，具体的可以查看这篇文章: # 前端使用Web Cryptography API进行内容加密，几乎无法破解

终于开发到最后了，打包完成后发现一个重大问题。开发阶段使用axios请求服务，通过vite的反向代理直接访问服务器属于是一点儿毛病没有。

但是打包完成以后，由于vite服务不再启动，反向代理直接失效，所有的请求都不能用了。

查阅Tauri官方文档，终于发现了一个解决方案：@tauri-apps/plugin-http插件。

使用这个插件一个最大的好处就是不需要再进行代理了，也不会存在跨域的问题，并且windows、mac、android都支持。

安装

bash 复制代码

npm run tauri add http

配置

json 复制代码

// src-tauri/capabilities/default.json
{
  ...
  "permissions": [
    ...
    {
      "identifier": "http:default",
      "allow": [
        {
          "url": "http://127.0.0.1:8080/*"
        },
        {
          "url": "https://*/*"
        }
      ]
    }
  ]
}

// src-tauri/tauri.conf.json
{
    ...
    "app": {
        ...
        "security": {
            "csp": "default-src 'self'; connect-src 'self' http://127.0.0.1:8080"
        }
    }
}

注意：这里两个配置都要加上，单加一个有可能有问题。

开发

js 复制代码

// 封装请求方法
import {fetch as request} from '@tauri-apps/plugin-http';

const base_url = 'http://127.0.0.1:8080/api';

/**
 * 封装plugin-http请求
 * @param {string} url 请求地址
 * @param {string} method 请求方法
 * @param {object} params 请求参数
 * @param {object} head 请求头
 * @returns {object} 请求结果
 * */
async function requestApi(url, method = 'POST', params, head) {
    const header = {
        'Content-Type': 'application/json',
        'Authorization': localStorage.getItem('token')
    }
    console.log('发送数据', params);
    const init = {
        method: method,
        headers: head || header,
        connectTimeout: 10000
    }
    if (method === 'POST') {
        init.body = JSON.stringify(params);
    }
    const response = await request(url, init);
    const res = await response.json();
    console.log('返回数据', res);
    return res;
}

// 使用
async function getData() {
    return requestApi(`${base_url}/getData`, 'GET');
}

async function queryData(params) {
    return requestApi(`${base_url}/queryData`, 'POST', params)
}