Fetch API Error on Mac: "Type Error: Network request failed..."

I’m trying to connect my plugin to the server using fetch to get some data back.

This works well in my computer (WINDOWS)

I had a test with a Mac user (havent’ tried with another Mac user) that seems his computer cannot connect to the server. We already tried checking the enabling extensions to connect to internet but doesn’t solve the problem.

Here’s the code I use to fetch data from my server, this works well on Windows but I’m having an Issue on Mac with this user:

const response = await fetch("https://compositenation.com:5000" + '/activate', {
    method: 'POST',
    headers: {
        'Accept': 'application/json, text/plain, */*',
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        someData: "someData"
    })
}).then(async (res) => {
    // Do something with res...
}).then(async data => {
    // Do something...
}).catch(async e => {
    await DialogAlert(e.stack, "error");
    return;
});

This code does’t even pass to the the first .then() code block. I thought it was the body and changed to something easy but seems that that isn’t the issue and it gives me this error:

image

Any ideas what could be causing the error?

Imma try with another Mac computers but haven’t had the chance as I only have a Windows computer and need a user with a Mac to help me to see if the pattern is with all Macs or only on this one.

I appreciate your help!

Hi @photonic
I’ve tested the URL on Windows & macOS.

  1. On Windows, ‘http’ works but ‘https’ not.
fetch("https://compositenation.com:5000" + '/activate', {
    method: 'POST',
    headers: {
        'Accept': 'application/json, text/plain, */*',
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        someData: "someData"
    })
})
.then(response => response.text())
.then(text => console.log(text))
.catch(e => console.log(e));

Promise {<pending>}
VM209:13 TypeError: Network request failed
    at z.n.onerror (netjs_scripts.js:2:583223)
    at z.m (domjs_scripts.js:2:31077)
    at domjs_scripts.js:2:11680
    at D (domjs_scripts.js:2:11572)
    at domjs_scripts.js:2:10864
    at L (domjs_scripts.js:2:10876)
    at P (domjs_scripts.js:2:11856)
    at i (netjs_scripts.js:2:91067)
fetch("http://compositenation.com:5000" + '/activate', {
    method: 'POST',
    headers: {
        'Accept': 'application/json, text/plain, */*',
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        someData: "someData"
    })
})
.then(response => response.text())
.then(text => console.log(text))
.catch(e => console.log(e));

Promise {<pending>}
VM213:12 <!DOCTYPE html>
<html lang="en">

<head>
	<title>Error!</title>
	<link
		href="https://fonts.googleapis.com/css?family=Michroma|Muli|Poppins|Titillium+Web|Roboto+Condensed|Roboto|Exo+2&display=swap"
		rel="stylesheet">
	<link rel="image_src" href="/imgs/cn_logo_normal.jpg" />
	<link rel="stylesheet" href="https://use.typekit.net/sor2wxk.css">
	<link id="hostStyle" rel="stylesheet" href="/css/cn-style.css" />
	<link id="hostStyle" rel="stylesheet" href="/css/style.css" />
	<link id="hostStyle" rel="stylesheet" href="/css/nav.css" />
	<link id="hostStyle" rel="stylesheet" href="/css/cart.css" />
	<link id="hostStyle" rel="stylesheet" href="/css/bottom.css" />
	<link id="hostStyle" rel="stylesheet" href="/css/profile.css" />
	<link id="hostStyle" rel="stylesheet" href="/css/plugins.css" />
	<link id="hostStyle" rel="stylesheet" href="/css/plugins-oniric.css" />
	<link id="hostStyle" rel="stylesheet" href="/css/scripts-breakgen.css" />
	<link id="hostStyle" rel="stylesheet" href="/css/latest-products.css" />
	<link id="hostStyle" rel="stylesheet" href="/css/profile-scripts.css" />
	<link id="hostStyle" rel="stylesheet" href="/css/about.css" />
	<link id="hostStyle" rel="stylesheet" href="/css/home.css" />
	<link id="hostStyle" rel="stylesheet" href="/css/tutorials.css" />
	<link id="hostStyle" rel="stylesheet" href="/css/support.css" />
	<link id="hostStyle" rel="stylesheet" href="/css/blog.css" />
	<link id="hostStyle" rel="stylesheet" href="/css/cn-responsive.css" />
	<link id="hostStyle" rel="stylesheet" href="/css/press.css" />
	<link rel="icon" type="image/png" href="/imgs/favicon.png" sizes="128x128" />

	<!-- <link rel="stylesheet" href="https://use.typekit.net/sor2wxk.css"> -->
	<!-- Facebook Pixel Code -->
	<script>
		!function (f, b, e, v, n, t, s) {
			if (f.fbq) return; n = f.fbq = function () {
				n.callMethod ?
					n.callMethod.apply(n, arguments) : n.queue.push(arguments)
			};
			if (!f._fbq) f._fbq = n; n.push = n; n.loaded = !0; n.version = '2.0';
			n.queue = []; t = b.createElement(e); t.async = !0;
			t.src = v; s = b.getElementsByTagName(e)[0];
			s.parentNode.insertBefore(t, s)
		}(window, document, 'script',
			'https://connect.facebook.net/en_US/fbevents.js');
		fbq('init', '649315709183988');
		fbq('track', 'PageView');
	</script>
	<noscript><img height="1" width="1" style="display:none"
			src="https://www.facebook.com/tr?id=649315709183988&ev=PageView&noscript=1" /></noscript>
	<!-- End Facebook Pixel Code -->
	<script src="/js/blockmobile.js"></script>
</head>

<body>
	<div class="block_modal">
		<div style="position: absolute; top: 50%; left: 50%; transform:  translateX(-50%) translateY(-50%);">
			<div class="icon-l"
				style="background-image: url(/imgs/icons/icon_installation3.svg); width: 150px; height: 150px; margin-bottom: 100px;">
			</div>
			<div style="margin-bottom: 100px;">
				<img src="/imgs/cn_logo_white.png" alt="">
			</div>
			<div>
				<p class="text">
					The platform is only optimized for computers by the moment
				</p>
			</div>
		</div>
	</div>
	<!-- <script type="text/javascript" src="/js/fullzoom.js"></script> -->
<div class="section-404">
    <div class="container-404-text">
        <h1 class="text-title text-title-big text__warning">Error : 500!</h1>
        <h2 class="text text-title">The platform is behaving weird!</h2>
        <p class="text text-title text-title-small">It might be a glitch in the Matrix!</p>
        <br>
        <p class="text text-title text-title-small">If the problem persists, please <a href="/support/contact"
                class="hyperlink">click here</a> to contact The Composite Nation Support Team
        </p>
    </div>
</div>
<div class="form-bottom-box">
    <p class="text text-paragraph">
        <a href="/" class="hyperlink">Home</a>
        <span class="separator">|</span>
        <a href="/plugins" class="hyperlink">Plugins</a>
        <span class="separator">|</span>
        <a href="/support" class="hyperlink">Support</a>
    </p>
</div>

</body>

</html>

‘curl’ also works ‘http’ but not ‘https’ as follows.
$ curl -X POST https://compositenation.com:5000/activate -H “Content-Type: text/plain” -d “HAHA”
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
0 0 0 0 0 0 0 0 --:–:-- --:–:-- --:–:-- 0
curl: (35) OpenSSL/1.1.1t: error:1408F10B:SSL routines:ssl3_get_record:wrong version number

  1. On macOS, both ‘http’ & ‘https’ not work.
fetch("https://compositenation.com:5000" + '/activate', {
    method: 'POST',
    headers: {
        'Accept': 'application/json, text/plain, */*',
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        someData: "someData"
    })
})
.then(response => response.text())
.then(text => console.log(text))
.catch(e => console.log(e));

Promise {<pending>}
fetch("http://compositenation.com:5000" + '/activate', {
    method: 'POST',
    headers: {
        'Accept': 'application/json, text/plain, */*',
        'Content-Type': 'application/json',
    },
    body: JSON.stringify({
        someData: "someData"
    })
})
.then(response => response.text())
.then(text => console.log(text))
.catch(e => console.log(e));

Promise {<pending>}
VM38:13 TypeError: Network request failed
    at XMLHttpRequest.xhr.onerror (fetch.js:568:1)
    at XMLHttpRequest.inlineListener (EventUtils.js:44:1)
    at EventTargetDispatch.js:232:1
    at Object.runWithNativeHandler (<anonymous>)
    at _dispatchNodeEvent (EventTargetDispatch.js:226:1)
    at _dispatchInternalCaptureEvent (EventTargetDispatch.js:146:1)
    at dispatchInternalEvent (EventTargetDispatch.js:98:1)
    at dispatchTrustedEvent (EventTargetDispatch.js:259:1)
    at dispatch (XMLHttpRequest.js:867:1)
VM43:13 TypeError: Network request failed
    at XMLHttpRequest.xhr.onerror (fetch.js:568:1)
    at XMLHttpRequest.inlineListener (EventUtils.js:44:1)
    at EventTargetDispatch.js:232:1
    at Object.runWithNativeHandler (<anonymous>)
    at _dispatchNodeEvent (EventTargetDispatch.js:226:1)
    at _dispatchInternalCaptureEvent (EventTargetDispatch.js:146:1)
    at dispatchInternalEvent (EventTargetDispatch.js:98:1)
    at dispatchTrustedEvent (EventTargetDispatch.js:259:1)
    at dispatch (XMLHttpRequest.js:867:1)

The reason for the failure is “The request timed out”.

‘curl’ also not work on macOS as follows.

curl -X POST http://compositenation.com:5000/activate -H “Content-Type: text/plain” -d “HAHA”
curl: (28) Failed to connect to compositenation.com port 5000 after 75004 ms: Couldn’t connect to server
curl -X POST https://compositenation.com:5000/activate -H “Content-Type: text/plain” -d “HAHA”
curl: (28) Failed to connect to compositenation.com port 5000 after 75008 ms: Couldn’t connect to server

These are the things I can check on UXP side now. Maybe you need to look at the server side.
One thing to note is that macOS PS does not support ‘HTTP’ protocol now.

Thanks,
David

1 Like

I already tried using “https” instead of “http” in the featch link for Mac computers but I get the same error. Is this something I need to make it work around or is this a bug from UXP? I’m really stuck having tons of mails of users wanting to use the UXP version but mac users are not able to do it because this error I’m having.

What type of protocol I could use or how I could fix this issue on my end? @mykim

‘https’ is recommended as it’s secure.
Please do test your HTTPS URL with some popular tools such as ‘curl’, ‘wget’ or ‘nmap’.
It looks like compositenation.com:5000 is not available. We cannot help if the server is not running properly. ‘wget’ or ‘curl’ should be able to receive response from your server.

nmap -v compositenation.com -p 5000

PORT STATE SERVICE
5000/tcp filtered upnp

  • filtered (from manual page)
    Nmap cannot determine whether the port is open because packet filtering prevents its probes from reaching the port. The filtering could be from a dedicated firewall device, router rules, or host-based firewall software. These ports frustrate attackers because they provide so little information. Sometimes they respond with ICMP error messages such as type 3 code 13 (destination unreachable: communication administratively prohibited), but filters that simply drop probes without responding are far more common. This forces Nmap to retry several times just in case the probe was dropped due to network congestion rather than filtering. This slows down the scan dramatically.
1 Like

I’m not a Network expert but I’ll try my best until I make this work and I appreciate a lot you are giving me feedback and your time to help me.

So you say it might be an issue inside my servert that is blocking ‘https’ requests?

I already tried CURL and it works well with this path, this is one of the paths that is giving me error.

The past “https://compositenation.com/activate” was just an example. This /plugins/checkforupdates is a real path.

I tried with CURL and it connects.

curl -X POST https://composienation.com/plugins/checkforupdates -H “Content-Type: text/plain” -d "Hello World"

However it doesn’t return something as on my server I need and input of the plugin info to work with inside my server but it does connect.

Can you try with this path?

https://compositenation.com/plugins/checkforupdates

Let me know if it works for you!

Thanks,
Mario

So you say it might be an issue inside my servert that is blocking ‘https’ requests?
→ Yes, I think so.

https://compositenation.com/plugins/checkforupdates” responses but I’m not sure if the response content is what you want. Its title is “Error!”.

curl -X POST https://compositenation.com/plugins/checkforupdates -H “Content-Type: text/plain” -d “Hello World”

<!DOCTYPE html>
<html lang="en">

<head>
	<title>Error!</title>
	<link
		href="https://fonts.googleapis.com/css?family=Michroma|Muli|Poppins|Titillium+Web|Roboto+Condensed|Roboto|Exo+2&display=swap"
		rel="stylesheet">
	<link rel="image_src" href="/imgs/cn_logo_normal.jpg" />
	<link rel="stylesheet" href="https://use.typekit.net/sor2wxk.css">
	<link id="hostStyle" rel="stylesheet" href="/css/cn-style.css" />
	<link id="hostStyle" rel="stylesheet" href="/css/style.css" />
	<link id="hostStyle" rel="stylesheet" href="/css/nav.css" />
	<link id="hostStyle" rel="stylesheet" href="/css/cart.css" />
	<link id="hostStyle" rel="stylesheet" href="/css/bottom.css" />
	<link id="hostStyle" rel="stylesheet" href="/css/profile.css" />
	<link id="hostStyle" rel="stylesheet" href="/css/plugins.css" />
	<link id="hostStyle" rel="stylesheet" href="/css/plugins-oniric.css" />
	<link id="hostStyle" rel="stylesheet" href="/css/scripts-breakgen.css" />
	<link id="hostStyle" rel="stylesheet" href="/css/latest-products.css" />
	<link id="hostStyle" rel="stylesheet" href="/css/profile-scripts.css" />
	<link id="hostStyle" rel="stylesheet" href="/css/about.css" />
	<link id="hostStyle" rel="stylesheet" href="/css/home.css" />
	<link id="hostStyle" rel="stylesheet" href="/css/tutorials.css" />
	<link id="hostStyle" rel="stylesheet" href="/css/support.css" />
	<link id="hostStyle" rel="stylesheet" href="/css/blog.css" />
	<link id="hostStyle" rel="stylesheet" href="/css/cn-responsive.css" />
	<link id="hostStyle" rel="stylesheet" href="/css/press.css" />
	<link rel="icon" type="image/png" href="/imgs/favicon.png" sizes="128x128" />

	<!-- <link rel="stylesheet" href="https://use.typekit.net/sor2wxk.css"> -->
	<!-- Facebook Pixel Code -->
	<script>
		!function (f, b, e, v, n, t, s) {
			if (f.fbq) return; n = f.fbq = function () {
				n.callMethod ?
					n.callMethod.apply(n, arguments) : n.queue.push(arguments)
			};
			if (!f._fbq) f._fbq = n; n.push = n; n.loaded = !0; n.version = '2.0';
			n.queue = []; t = b.createElement(e); t.async = !0;
			t.src = v; s = b.getElementsByTagName(e)[0];
			s.parentNode.insertBefore(t, s)
		}(window, document, 'script',
			'https://connect.facebook.net/en_US/fbevents.js');
		fbq('init', '649315709183988');
		fbq('track', 'PageView');
	</script>
	<noscript><img height="1" width="1" style="display:none"
			src="https://www.facebook.com/tr?id=649315709183988&ev=PageView&noscript=1" /></noscript>
	<!-- End Facebook Pixel Code -->
	<script src="/js/blockmobile.js"></script>
</head>

<body>
	<div class="block_modal">
		<div style="position: absolute; top: 50%; left: 50%; transform:  translateX(-50%) translateY(-50%);">
			<div class="icon-l"
				style="background-image: url(/imgs/icons/icon_installation3.svg); width: 150px; height: 150px; margin-bottom: 100px;">
			</div>
			<div style="margin-bottom: 100px;">
				<img src="/imgs/cn_logo_white.png" alt="">
			</div>
			<div>
				<p class="text">
					The platform is only optimized for computers by the moment
				</p>
			</div>
		</div>
	</div>
	<!-- <script type="text/javascript" src="/js/fullzoom.js"></script> -->
<div class="section-404">
    <div class="container-404-text">
        <h1 class="text-title text-title-big text__warning">Error : 500!</h1>
        <h2 class="text text-title">The platform is behaving weird!</h2>
        <p class="text text-title text-title-small">It might be a glitch in the Matrix!</p>
        <br>
        <p class="text text-title text-title-small">If the problem persists, please <a href="/support/contact"
                class="hyperlink">click here</a> to contact The Composite Nation Support Team
        </p>
    </div>
</div>
<div class="form-bottom-box">
    <p class="text text-paragraph">
        <a href="/" class="hyperlink">Home</a>
        <span class="separator">|</span>
        <a href="/plugins" class="hyperlink">Plugins</a>
        <span class="separator">|</span>
        <a href="/support" class="hyperlink">Support</a>
    </p>
</div>

</body>

</html>%
1 Like

I believe I see two issues here:

  1. Only HTTPS is supported on macOS due to app security restrictions. I recommend always using HTTPS.
  2. Your site does not appear to support HTTPS when using port 5000. I recommend reconfiguring your load balancer to support TLS on port 5000 or simply use the default port (443).
1 Like

So I removed the port fromt he URL that is used in the fetch API and it works now. I appreciate a lot for your help guys!

1 Like