Tutorial proxy-backend returning `index.html` not json? #3562

ydirson · 2023-12-17T00:07:06Z

Note: I think I followed the tuto right, but it may well be a user error - what really happens behind my back in trunk serve --proxy-backend indeed worries me.

Problem
In the last step of the tutorial, the trunk serve process does report proxying as expected:

2023-12-16T23:28:47.916146Z  INFO 📡 proxying /tutorial -> https://yew.rs/tutorial

but the call to json() on the Response object fails with a parse error, caught by unwrap():

panicked at src/main.rs:74:22:
called `Result::unwrap()` on an `Err` value: SerdeError(Error("expected value", line: 1, column: 1))

When querying its text() instead I get something looking like dist/index.html, excep:

with template bits like {{__TRUNK_ADDRESS__}} expanded
with different filenames, but always the 56dc19c1d... hash in them, whereas the one in dist changes on every rebuild

"<!DOCTYPE html><html lang=\"en\"><head>\n<link rel=\"preload\" href=\"/yew-tuto-56dc19c1d2397a2a9d7ed57de056ad246e9780a244ab777c8af3501c5b435ab460786da12a03b5d575a5b77bb0c0b951_bg.wasm\" as=\"fetch\" type=\"application/wasm\" crossorigin=\"anonymous\" integrity=\"sha384-VtwZwdI5eiqdftV94FatJG6XgKJEq3d8ivNQHFtDWrRgeG2hKgO11XWlt3uwwLlR\">\n<link rel=\"modulepreload\" href=\"/yew-tuto-56dc19c1d2397a2a9d7ed57de056ad246e9780a244ab777c8af3501c5b435ab460786da12a03b5d575a5b77bb0c0b951.js\" crossorigin=\"anonymous\" integrity=\"sha384-abm7hNroHgmO-4dhhx1owgizoubsoronoQebv8kzdegbKJXclKG1Se4cNkK9b48k\"></head>\n    <body>\n\n\n<script type=\"module\">\nimport init, * as bindings from '/yew-tuto-56dc19c1d2397a2a9d7ed57de056ad246e9780a244ab777c8af3501c5b435ab460786da12a03b5d575a5b77bb0c0b951.js';\ninit('/yew-tuto-56dc19c1d2397a2a9d7ed57de056ad246e9780a244ab777c8af3501c5b435ab460786da12a03b5d575a5b77bb0c0b951_bg.wasm');\nwindow.wasmBindings = bindings;\n\n</script><script>\"use strict\";\n\n(function () {\n\n    const address = 'localhost:8080';\n    let protocol = '';\n    protocol =\n        protocol\n

when my index.html reads:

<!DOCTYPE html><html lang="en"><head>
<link rel="preload" href="/yew-tuto-dfbd59d34641e15def5e2ad596d898d62fbcc1fa07f7416e23f9e3fcac1b96cac82ac4ddd0b1765a62a49daf68df933a_bg.wasm" as="fetch" type="application/wasm" crossorigin="anonymous" integrity="sha384-371Z00ZB4V3vXirVltiY1i-8wfoH90FuI_nj_KwblsrIKsTd0LF2WmKkna9o35M6">
<link rel="modulepreload" href="/yew-tuto-dfbd59d34641e15def5e2ad596d898d62fbcc1fa07f7416e23f9e3fcac1b96cac82ac4ddd0b1765a62a49daf68df933a.js" crossorigin="anonymous" integrity="sha384-T7wdMh576Bm4zh1ka8x7ATfiVk0hQi1dd3noLX_rCbtJmfmE_W9PnMYJdEjnGnIW"></head>
    <body>


<script type="module">
import init, * as bindings from '/yew-tuto-dfbd59d34641e15def5e2ad596d898d62fbcc1fa07f7416e23f9e3fcac1b96cac82ac4ddd0b1765a62a49daf68df933a.js';
init('/yew-tuto-dfbd59d34641e15def5e2ad596d898d62fbcc1fa07f7416e23f9e3fcac1b96cac82ac4ddd0b1765a62a49daf68df933a_bg.wasm');
window.wasmBindings = bindings;

</script><script>"use strict";

(function () {

    const address = '{{__TRUNK_ADDRESS__}}';
    let protocol = '';
...

curl http://127.0.0.1:8080/tutorial/data.json does dump me the expected JSON (and I also tried to add an intermediate tutorial step just for decoding, see repo, but I'm not pleased with how it diverges too much to be useful)

Steps To Reproduce

I uploaded my steps to https://github.com/ydirson/test-yew-tutorial

Steps to reproduce the behavior:

checkout commit 'use a proxy server' to see the .json().unwrap() fail
checkout commit DBG to see the text() dump

Environment:

Yew version:

version = "0.21.0"
source = "git+https://github.com/yewstack/yew/#1d889347a6205a2dc79c1d1fea9d49092c0627db"

Rust version: 1.74.0
Target: wasm32-unknown-unknown
Build tool, if relevant: trunk
OS, if relevant: Linux (Debian 12, amd64)
Browser and version: Firefox 115.5.0esr

Questionnaire

I'm interested in fixing this myself but don't know where to start
I would like to fix and I have a solution
I don't have time to fix this right now, but maybe later

The text was updated successfully, but these errors were encountered:

notno · 2024-01-20T10:37:06Z

Same issue here

ranile · 2024-02-19T12:49:20Z

I just ran curl https://yew.rs/tutorial/data.json and it returns the JSON for me. It appears you are querying the tutorial home page instead of the data.json file. The home page will of course returns HTML so it can be rendered by the browser

FelixSeol · 2024-02-21T10:56:13Z

Same issue.

let fetched_videos: Vec<Video> = Request::get("/tutorial/data.json")
                    .send()
                    .await
                    .unwrap()
                    .json()
                    .await
                    .unwrap();

with this code, I ran trunk serve --proxy-backend=https://yew.rs/tutorial it returns

panicked at src/main.rs:67:22:
called `Result::unwrap()` on an `Err` value: SerdeError(Error("expected value", line: 1, column: 1))

but curl returns fine.

$ curl http://127.0.0.1:8080/tutorial/data.json
[
    {
        "id": 1,
        "title": "Building and breaking things",
        "speaker": "John Doe",
        "url": "https://youtu.be/PsaFVLr8t4E"
    },
    {
        "id": 2,
        "title": "The development process",
        "speaker": "Jane Smith",
        "url": "https://youtu.be/PsaFVLr8t4E"
    },
    {
        "id": 3,
        "title": "The Web 7.0",
        "speaker": "Matt Miller",
        "url": "https://youtu.be/PsaFVLr8t4E"
    },
    {
        "id": 4,
        "title": "Mouseless development",
        "speaker": "Tom Jerry",
        "url": "https://youtu.be/PsaFVLr8t4E"
    }
]

FelixSeol · 2024-02-21T11:15:01Z

In my case, it turns out browser issue.

chrome Console returns

127.0.0.1/:2 The integrity attribute is currently ignored for preload destinations that do not support subresource integrity. See https://crbug.com/981419 for more information

I don't know what that means exactly, but I guess it cannot get data.json correctly and leads 'serde error'.

Safari, Firefox, Edge work fine.

mDanone · 2024-04-13T16:06:16Z

Had the same issue on mac m1 pro, Sonoma 14.3 with 5000 port, swithed to 8000 port and it started working pretty well. So the next step was turn 5000 back, so it continued working well. I think it is may be because of some cache issues because i noticed that first request was a bit longer then next.

Olaoluwa26 · 2024-05-02T14:02:03Z

Thank you @mDanone, changing ports helped.

BartMassey · 2024-05-22T22:52:43Z

The problem I had here, for Firefox at least, is that once the client gets a CORS error Firefox won't allow the request to be retried once the proxy server is up. Even shift-reload doesn't seem to reset things. Easy workaround is to just connect again in a new tab.

Is there some reason yew.rs doesn't just have a CORS policy that allows access to the data, rather than needing a proxy server?

DavidAntliff · 2024-07-10T06:26:53Z

I'm having the exact same problem (Firefox) - the download isn't data.json but something that starts out with this:

<!doctype html>
<html lang="en">
<head>
<link rel="modulepreload" href="/yew-app-4e192d3122da419a.js" crossorigin=anonymous integrity="sha384-l37IIPAgQSy/RE9SAaBLuMvkS3VP/bSold2x8DL7dYz+feNCiJ88OiWP/ngSL8PQ">
<link rel="preload" href="/yew-app-4e192d3122da419a_bg.wasm" crossorigin=anonymous integrity="sha384-kIu9dgrSuuD13cwfyhAd/N5XAqSmf54tKzqQpyiZ5X+ixo58PaFULW5G0dUE52gd" as="fetch" type="application/wasm"></head>
<body>
<script type="module" nonce="jr3bgc5cG3jHKCfwSjrq4w==">
import init, * as bindings from '/yew-app-4e192d3122da419a.js';
const wasm = await init('/yew-app-4e192d3122da419a_bg.wasm');

...

Yet, curl http://127.0.0.1:8080/tutorial/data.json returns the expected JSON doc.

As per the tutorial, I'm running: trunk serve --proxy-backend=https://yew.rs/tutorial

And my fetch code is:

                let fetched_videos: Vec<Video> = Request::get("/tutorial/data.json")
                    .send()
                    .await
                    .unwrap()
                    .json()
                    .await
                    .unwrap();   // <<<< PANIC IS HERE

I feel like I'm doing something obviously wrong, but I can't work out what!

Note: opening in a new tab doesn't help, neither does forced refresh, or restarting trunk.

Interestingly, if I run trunk serve --proxy-backend=https://yew.rs/tutorial --port 8081 (changing the port to 8081), it now works. Huh?

MacGurk · 2024-07-17T20:28:57Z

Seems to be indeed a caching issue. Had the same issue in Firefox, first run the Request directly with the CORS issue and after running it with trunk serve --proxy-backend=https://yew.rs/tutorial it wouldn't load the json data.
But after finding this issue I tried different browsers and a different port and it worked, but it would still not work with a different tab or fresh restart of Firefox.
After clearing all temporary cached site data in Firefox it now works with the default port 8080 as well!

ydirson added the bug label Dec 17, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Tutorial proxy-backend returning `index.html` not json? #3562

Tutorial proxy-backend returning `index.html` not json? #3562

ydirson commented Dec 17, 2023

notno commented Jan 20, 2024

ranile commented Feb 19, 2024

FelixSeol commented Feb 21, 2024 •

edited

Loading

FelixSeol commented Feb 21, 2024 •

edited

Loading

mDanone commented Apr 13, 2024

Olaoluwa26 commented May 2, 2024

BartMassey commented May 22, 2024

DavidAntliff commented Jul 10, 2024 •

edited

Loading

MacGurk commented Jul 17, 2024

Tutorial proxy-backend returning index.html not json? #3562

Tutorial proxy-backend returning index.html not json? #3562

Comments

ydirson commented Dec 17, 2023

notno commented Jan 20, 2024

ranile commented Feb 19, 2024

FelixSeol commented Feb 21, 2024 • edited Loading

FelixSeol commented Feb 21, 2024 • edited Loading

mDanone commented Apr 13, 2024

Olaoluwa26 commented May 2, 2024

BartMassey commented May 22, 2024

DavidAntliff commented Jul 10, 2024 • edited Loading

MacGurk commented Jul 17, 2024

Tutorial proxy-backend returning `index.html` not json? #3562

Tutorial proxy-backend returning `index.html` not json? #3562

FelixSeol commented Feb 21, 2024 •

edited

Loading

FelixSeol commented Feb 21, 2024 •

edited

Loading

DavidAntliff commented Jul 10, 2024 •

edited

Loading