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

Question

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

ydirson opened this issue 6 months ago · comments

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

Nathan Rosquist · Answer 1 · Sat Jan 20 2024 18:37:06 GMT+0800 (China Standard Time)

Same issue here

Elina · Answer 2 · Mon Feb 19 2024 20:49:20 GMT+0800 (China Standard Time)

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

Felix Seol · Answer 3 · Wed Feb 21 2024 18:56:13 GMT+0800 (China Standard Time)

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"
    }
]

Felix Seol · Answer 4 · Wed Feb 21 2024 19:15:01 GMT+0800 (China Standard Time)

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.

Sam · Answer 5 · Sun Apr 14 2024 00:06:16 GMT+0800 (China Standard Time)

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.

Olaoluwa_Sandey · Answer 6 · Thu May 02 2024 22:02:03 GMT+0800 (China Standard Time)

Thank you @mDanone, changing ports helped.