Unable to Successfully Connect to Flask By Javascript Fetch

General Discussion
1

Edit: as described in further post below, I got around this by putting ‘X-Pinggy-No-Screen’: ‘AvoidTheProblem’ in the header field of my fetch call. I had tried putting that field in my ssh command. I hadn’t realized I needed to put it into my javascript fetch. This makes some sense, I just didn’t realize that was where I needed to put the header.

Problem [now solved]:
I was previously using serveo and it worked. I’ve gotten halfway with pinggy to getting things working but not all the way. I don’t know what to try next. I will describe my use case and what is working and what is not working. The basic thing I am doing is as follows, on a windows 11 desktop: (1) I start a python / flask server on my computer. (2) I use either a localhost:8000 webpage or an online webpage with javascript to do a fetch request through an http tunnel, and receive the output from my python/flask server. (3) Normally, my python/flask server checks the origin header to make sure it is correct before responding in the positive. However, even when I disable that check, I am unable to get things to work with pinggy, as further explained below.

Here is what I am encountering:
(1) I start my python flask server, port 5000. This has no problems.
(2) I start my serveo or pinggy tunnel. This has no problems.
(3) I copy the https url from serveo or pinggy
(4) (a) I put that url into a browser directly, or (b) into a box on webpage that then makes a fetch request.
(5) When things go well, I then see a received request in my python / flask server window, and then I also see the response (let’s say “hello world”) in the browser.
Right now, I am not doing post, just a simple fetch.

With Serveo, I got everything to work for 4a and 4b.
With pinggy, I got 4a to work, but 4b is showing “Error: NetworkError when attempting to fetch resource.” and also 4b is not showing up at all as received for my python/flask server, even if I turn off the origin check.

If I watch the terminal where I have created my pinggy tunnel, I see the following: when I access through a webpage, the RB and SB do change. When I try to use the fetch, those do not change but the TC does increase. So it seems like my fetch request is reaching pinggy, but something is different for that relative to when I try to access the tunnel through the webpage. Below is my javascript code, so you can see there is nothing strange. Any ideas? I am using free pinggy, but it doesn’t seem like that is the problem.

        try {
            console.log(`Fetching from: ${fullURL}`); // Log the URL to console
            const response = await fetch(fullURL, { mode: 'cors' });
            console.log('Fetch succeeded:', response); // Log the fetch response
            const text = await response.text();
            resultElement.innerText = `Response from server: ${text}`;
        } catch (error) {
            console.error('Fetch error:', error); // Log error details to console
            resultElement.innerText = `Error: ${error.message}`;
        }

Here is what I am using that works for the browser accessing tunnel way with pinggy, with or without preflight (but doesn’t work with fetch and same url):

ssh -p 443 -o StrictHostKeyChecking=no -R0:127.0.0.1:5000 a.pinggy.io x:xff x:fullurl x:passpreflight

I have checked that the url being printed out as to what’s being fetched is the same as the browser. I have tried with and without trailing slash for my fetch. The browser removes trailing slash if it’s there.

Also, I’ve checked that if I change my “cors” to “no-cors”, then pinggy does in fact get a response from my python / flask server. It gets a blank response.

After further investigation, I do see this in the browser:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://rnxxi-66-44-30-95.a.free.pinggy.link/. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.

It seems like maybe getting past this requires me to make a change on pinggy’s end? If so, Would I be able to make the appropriate change with a paid account?

I’ve now tried adding the access control allow origin header, and that has not made any difference.

ssh -p 443 -o StrictHostKeyChecking=no -R0:127.0.0.1:5000 a.pinggy.io x:xff x:fullurl x:passpreflight a:Access-Control-Allow-Origin:*

I am wondering if I will be able to get past this with an API key? It looks to me like the problem is that pinggy will not allow cross origin fetch, but that if get a pro plan and I use an API key I should be able to?

2

If it is a CORS issue, you need to add CORS headers to your response. Pinggy does not modify response headers at all. If you are using a Flask server, you can add CORS headers using the flask-cors module.

I saw that you tried adding a:Access-Control-Allow-Origin:* in the command; however, this would modify the request header sent to the Flask server. It does not change request header.

3

After starting a browser in development mode, I finally figured it out. pinggy was returning the browser landing page (but not in a way that I could see it, because the browser was not returning anything due to the CORS errors). The idea that Pinggy was trying to return the browser page was something I suspected, but I was confused because I could never receive anything. Also, I had tried putting the ‘X-Pinggy-No-Screen’ in my ssh command. After the browser in development mode information, I tried a few more things and figured out I needed to put that header in my fetch command. I used a value of ‘X-Pinggy-No-Screen’ : ‘AvoidTheProblem’ in my fetch headers. I had earlier tried putting various User-Agent values in my fetch command headers, which had not worked. For me, I now have a solution that is working. So now I will continue on my project, tomorrow :).

1 Like