POST to PHP does not work on build (allow HTTP)

[Himra]

I am trying to fetch data via POST. This works fine in dev and tauri dev, but as soon as the whole thing runs in a finished build, nothing comes.

[✔] Environment
- OS: Windows 10.0.19044 X64
✔ WebView2: 114.0.1823.58
✔ MSVC: Visual Studio Build Tools 2022
✔ rustc: 1.70.0 (90c541806 2023-05-31)
✔ Cargo: 1.70.0 (ec8a8a0ca 2023-04-25)
✔ rustup: 1.26.0 (5af9b9484 2023-04-05)
✔ Rust toolchain: stable-x86_64-pc-windows-msvc (default)
- node: 19.6.0
- pnpm: 8.6.5
- yarn: 1.22.19
- npm: 9.7.2

[-] Packages
- tauri [RUST]: 1.4.1
- tauri-build [RUST]: 1.4.0
- wry [RUST]: 0.24.3
- tao [RUST]: 0.16.2
- @tauri-apps/api [NPM]: 1.4.0
- @tauri-apps/cli [NPM]: 1.4.0

[-] App
- build-type: bundle
- CSP: unset
- distDir: ../dist
- devPath: http://localhost:1420/
- framework: Vue.js
- bundler: Vite

This is my VUE component:

<template>
  <div>
    <p v-for="ma in Daten" :key="ma.pers_nr">
      {{ ma.name }}
    </p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      Daten: [],
    };
  },

  created() {
    this.AlleMitarbeiter("KT", "A");
  },

  methods: {
    AlleMitarbeiter: function (Abteilung, pg_ken) {
      const postData = new FormData();
      postData.append("action", "AlleMitarbeiter");
      postData.append("Abteilung", Abteilung);
      postData.append("pg_ken", pg_ken);

      fetch("http://192.168.xxxxxxxxxx/Aktion.php", {
        method: "POST",
        body: postData,
      })
        .then((response) => {
          return response.text();
        })
        .then((data) => {
          this.Daten = JSON.parse(data);
          console.log(this.Daten);
        });
    },
  },
};
</script>

The following error message comes up in the build:

Mixed Content: The page at 'https://tauri.localhost/' was loaded over HTTPS, but requested an insecure resource 'http://192.168.xxxxxxxxxx/Aktion.php'. This request has been blocked; the content must be served over HTTPS.

The whole thing is running on the local network. How can I allow http?

Thanks already for your help

Greetings Himra

[FabianLars]

This is our main tracking issue for this: #3007

If you can't use tauri's http module instead of the webview's native fetch then the only workaround currently is to use the localhost plugin (which exposes your whole frontend on localhost :/ )

[FabianLars]

The CSP config is completely unrelated to this issue. It's just that browser engines forbid connecting to insecure resources from https origins, nothing to do with CSP or CORS, just a separate security "feature" of all the browser engines.

[Himra]

Hello @FabianLars,

now I have tested everything from the issue, but nothing works.

Now I try the tauri api example:

import { getClient, Body, ResponseType } from '@tauri-apps/api/http';
const client = await getClient();
const response = await client.post('http://localhost:3003/users', {
  body: Body.json({
    name: 'tauri',
    password: 'awesome'
  }),
  // in this case the server returns a simple string
  responseType: ResponseType.Text,
});

and get this for me meaningless error message

localhost/:1 Uncaught missing field type

how can I solve this?

[FabianLars]

Sorry for the long delay. looks like the example in the method docs is completely butchered. It should look more like this:

const response = await client.post(
    'http://localhost:3003/users',
    Body.json({
        name: 'tauri',
        password: 'awesome',
    }),
    // in this case the server returns a simple string
    { responseType: ResponseType.Text },
);
``

[Himra]

Hello @FabianLars,

that was the tip which helped me.
Now also without https on the network server
The following is running in my build:

<template>
  <div>
    <p v-for="ma in Daten" :key="ma.pers_nr">
      {{ ma.name }}
    </p>
  </div>
</template>

<script>
import { getClient, Body, ResponseType } from "@tauri-apps/api/http";
export default {
  data() {
    return {
      Daten: [],
    };
  },
  async created() {
    this.Daten = await this.AlleMitarbeiter("KT", "A");
  },

  methods: {
    AlleMitarbeiter: async (Abteilung, pg_ken) => {
      const client = await getClient();
      const response = await client.post(
        "http://192.168.xxxxxxxxxx/Aktion.php",
        Body.form({
          action: "AlleMitarbeiter",
          Abteilung: Abteilung,
          pg_ken: pg_ken,
        }),
        { responseType: ResponseType.JSON }
      );
      return response.data;
    },
  },
};
</script>

The scope in the tauri.conf.json must be set accordingly, otherwise nothing runs.

Thanks for your help

Greeting Himr