`the page is being unloaded` error - javascript

I was working with a NodeJS-ReactJS Isomorphic App, and when I click on a Link I'm getting an error saying
Uncaught (in promise) Error: Request has been terminated
Possible causes: the network is offline, Origin is not allowed by Access-Control-Allow-Origin, the page is being unloaded, etc.
The first two reasons (offline and CORS) I heard about. What is the the page is being unloaded error means? How it may cause the browser not navigating to need.

Your Error is
Uncaught (in promise) Error: Request has been terminated
This error is caused when the request in the promise is terminated before it is resolved or rejected. This can happen if (Possible causes)
the network is offline : There is a network failure and the connection to the url using which the request was being processed is lost.
Origin is not allowed by Access-Control-Allow-Origin : The request is rejected due to absence of proper CORS headers.
the page is being unloaded : The page making the request is closed before the request completed.
Of the above reasons, the most probable cause relevant to your case would be either 1 or 2, since you get the error on clicking a Link to navigate to a component. Please check the requests being made by the new component that is being loaded using the Link.
Edit:
If you look at the error message screen shot, it clearly states that the error occured at line no. 73194 of app.js at PromiseRequest in node_modules/superagent/lib/client.js.Request.crossDomainError. So the reason for your error is a CORS error which is described in number 2 above.

'cause Link component is using Location.push to do the redirection, while Location.push method cannot redirect to another domain.
So my solutions are:
Use window.open('http://your.new.domain.com/index', '_self')
Use <a href="http://your.new.domain.com/index">

It seems you have not enabled the cors in your node server.
Suggested Steps:
npm install cors
use it in app.js (node server)
.
var cors = require('cors');
var app = express();
app.use(cors()); //Enable CORS

Related

403 error when I try to make a request to my backend from my frontend although I set `Access-Control-Allow-Origin` to "*"`

I have a problem that has been blocking me for several days and I don't understand where it comes from.
I have read a lot on the internet and I can't find a solution to solve my problem exactly.
I'll start: I just implemented a frontend/backend solution that I've just deployed in production. My backend and frontend are in a different port each. However, I got the famous error No 'Access-Origin' header is present on the requested resource.
I managed to solve this problem by adding an Access-Control-Allow-Origin header in Nginx:
more_set_headers 'Access-Control-Allow-Origin: *';
The error disappeared after that, then I got an error but in Axios this time. It is a 403 error ERR_BAD_REQUEST - Request failed with status code 403 - Invalid CORS request.
So here I am, I despair a bit.
I added this code in AXIOS in order to give it the header (axios.js) :
export default boot(async ({ app }) => {
axios.defaults.headers.common["Access-Control-Allow-Origin"] = "*";
});
But it still doesn't work.
So I analyzed the response I get when I send the request and here it is:
I saw that there was as Referrer-Policy: strict-origin-when-cross-origin
So I tried to change this mode, by adding it in the headers and it didn't work. And I changed this mode in my browser and it still doesn't work.
So here's the thing, can anybody help me? I don't expect an answer but I really can't understand what's blocking and it's bothering me in my debugging.
What are the CORS missing ? How and where I can add them ?

What's causing this error when running a web worker?

First time using web workers and I get this error when I try to run it.
First I get a very generic error event sent to my worker.onerror handler. It does not have the message property, the only information is the property type which says error.
Looking at the network tab in dev tools, the request for the worker script looks like it succeeds but it only has provisional response headers and no content to preview.
Preview has:
failed to load response data: connection is closed, can't dispatch pending call to Network.getResponseBody
This caused me to waste about an hour searching for web worker errors. Anyway it turns out that you can get this error if you have a syntax error in your Javascript. At least that is what got me.

How to detect if HTTP requests are blocked by a browser extension?

I am trying to detect if a user is using some kind of extension in his browser that could prevent my site from working properly and if so, display a message for the user.
I am testing with an extension called uMatrix, but there are others with a similar approach.
My problem is, that kind of extension will block my HTTP request, but that doesn't return a proper status code (like 403, 404, 500, etc). Instead, when I catch my request, I just get a
Error: Network Error
at [my file name and line number here]
at XMLHttpRequest.handleError (xhr.js:83)
I believe this same error would be thrown in other circumstances, like lack of internet connection, so I can't assume this Network Error means that the user has a "HTTP request blocker".
I was reading a lot about identifying AdsBlocker on this thread and other places, but I don't think it applies to my issue.
Any ideas on how to identify that a user is blocking my HTTP Requests? (Either on purpose or through a browser extension)
I thought I would share here the solution I found, even though I don't think that's the best answer yet.
I am using Axios for my API requests and I found this thread here:
https://github.com/axios/axios/issues/383#issuecomment-234079506
What they suggest it's to check if the response has a status (but in latest Axios, they don't even return a response). If not, it means the server was never reached. That could still mean that there is no internet connection, not necessarily an extension blocked the request. So I adjusted my message to cover both scenarios.
My final code was something like this:
// Note the use of "HEAD", since that will be faster than a "GET"
axios.head(server_url_for_testing).catch(function(error) {
if (!error.response) {
// Display my warning message
}
})

Fetch throws "TypeError: Failed to fetch" for successful, same-origin request

We have been encountering inconsistent client errors with a single-page JavaScript application making fetch requests. Of note, they are all same-origin requests.
let request = new Request(url, options);
...
window.fetch(request)
.then(response => response.json())
.then(data => ...)
.catch(error => ...)
Around 5% of the promises are rejecting with the following error despite the server and the browser receiving a 200 OK response:
TypeError: Failed to fetch
I'm stumped... All of my searches lead to discussions about CORS errors. That doesn't seem to apply given these are all same-origin requests. What is causing the fetch to throw the TypeError?
I can confirm using the Network tab in Chrome DevTools that the fetch request completes with a 200 OK response and valid JSON. I can also confirm that the URLs are same-origin. I can also confirm that there are no CORS pre-flight requests. I have reproduced this issue on Chrome 66 and Safari 11.1. However, we've received a stream of error reports from a mix of Chrome and Safari versions, both desktop and mobile.
EDIT:
This does not appear to be a duplicate of the linked question as we are not sending CORS requests, not setting mode: "no-cors", and not setting the Access-Control-Allow-Origin header.
Additionally, I re-ran tests with the mode: 'same-origin' option set explicitly. The requests are (still) successful; however, we (still) receive the intermittent TypeError.
I know that this is an old issue, but after searching the entire evening I want to share my findings so you can spend your time better.
My web app also worked well for most users but from time to time visitors received the error mentioned in the question. I'm not using any complicated infrastructure (reverse proxy etc.) setup nor do I communicate with services on a different domain/protocol/port. I'm just sending a POST request to a PHP-File on the same server where the React app is served from.
The short answer: My problem was that I've sent the request to the backend by using an absolute URL, like https://my-fancy-domain.com/funky_service.php. After changing this to a relative path like /funky-service.php the issue was gone.
My explanation: Most users come to the site without www in the URL, but some users actually do type this part in their address bars (www.my-fancy...). It turned out that the www is part of the origin, so when these users submit the form and send post requests to https://my-fancy... it's technically another origin. This is why the browser expects CORS headers and sometimes even sends an OPTIONS preflight request. When you use a relative path in your JavaScript-Code the post request will also include the www-part (uses the origin from the address bar) -> same-origin -> no CORS hassle. As it only affects visitors that come with the www to your site it also explains the fact that it worked for most users even with the absolute URL.
Also important to know: The request fails in the browser/ JavaScript-Code but is actually sent to the backend (very ugly!).
Let me know if you need more information. Actually, it is very simple but hard to explain (and to find)
The issue could be with the response you are receiving from back-end. If it was working fine on the server then the problem could be with the response headers. Check the Access-Control-Allow-Origin (ACAO) in the response headers. Usually react's fetch API will throw fail to fetch even after receiving response when the response headers' ACAO and the origin of request won't match.
Ref: Getting "TypeError: failed to fetch" when the request hasn't actually failed

Xmlhttprequest Cross site domain issue?

been stuck with an issue for sometime and not getting the best solution for this yet.
I am calling an xmlhttprequest (POST)from a javascript residing at server say 'http://localhost:8080' to another server 'http://localhost:9090'
Getting an browser error As mentioned below:
Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE)"  nsresult: "0x80004005 (NS_ERROR_FAILURE)" 
 
The error doesnt point anything specific either. Did test the same by calling from same server and worked fine. But i am looking at two server architecture.
Any resolution/ideas ? Saw few posts on setting response headers with cross domain origin as '*',but not sure exactly how to set response headers for xmlhhtprequest calls?
Since the origins of the entities that are trying to communicate are the same in the host part but different in the port part (localhost:8080 <-> localhost:9090) -- this violates the same origin policy and the browser throws an error. See this for more info: http://en.wikipedia.org/wiki/Same_origin_policy
The way to get around this is to use CORS headers in the HTTP responses returned by the server. The fact that you are using XHR to generate the HTTP requests makes no difference. Basically, what you need to do is add a Access-Control-Allow-Origin: * or Access-Control-Allow-Origin: http://localhost:8080 to your responses for POST requests to http://localhost:9090. This of course assumes that you have control over the server resource you are POSTing to so that you can modify the response headers. See this for more info: http://enable-cors.org/ and http://en.wikipedia.org/wiki/Cross-Origin_Resource_Sharing

Categories