This problem completely puzzles me. Basically, the user can use the site that I created without any problems if they either type in the URLs directly or use the buttons for navigation. If the user clicks the "Back" button in the browser, the site will display them on the previous page on which they were ... but any selection there will not be sent. Retrieval will not result in errors. He will just sit in pendingunlimited time. Pay attention to the screenshot below showing the only request that is pending within ten minutes:

This happens with perfect consistency with every page of the site. If someone starts hard reloador clicks on explanationnext to the request freezing in chrome dev tools, the page loads normally.
I'm not even sure which code to include. I include an arbitrary sample component below:
The component freezes after the user returns with the back button.
import React from 'react'
import './UsersView.scss'
import {fetchGET} from '../../../../utils/apiUtils'
import UserRow from './UserRow'
class UsersView extends React.Component {
constructor(props) {
super(props);
this.state = {
users : []
};
this.componentWillMount = this.componentWillMount.bind(this);
}
componentWillMount(){
var roles = [];
var rolesLookup = JSON.parse(localStorage.getItem("roleById"));
var idLookup = JSON.parse(localStorage.getItem("idByRole"));
var permissionLookup = {};
let filter = {is_active:true};
fetchGET('/v1/permission/', filter).then(function (json) {
if(json.code){
this.setAlertBox(json.message);
}
else{
var permissions = json.Permission;
for(var i = 0; i < permissions.length; i++){
var permission = permissions[i];
if(permission.user_id in permissionLookup){
permissionLookup[permission.user_id].push(permission.role_id);
}
else{
permissionLookup[permission.user_id] = [permission.role_id];
}
}
fetchGET('/v1/user/', null).then(function (json) {
if(json.code){
this.setAlertBox(json.message);
}
else{
var users = json.User;
var userRows = [];
for(var i = 0; i < users.length; i++){
var user = users[i];
let roleIds = permissionLookup[user.uid];
var newRow = <UserRow user={user} roles={Object.keys(idLookup)} key={i.toString()} rowId={i.toString()} role={rolesLookup[roleIds[0]]} handleChange={this.handleChange}/>;
userRows.push(newRow);
}
this.setState({'users': userRows});
}
}.bind(this))
}
}.bind(this))
}
render() {
return (
<div className="usersView">
<table className="table table-hover table-striped">
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Email</th>
<th>Roles</th>
</tr>
</thead>
<tbody>
{this.state.users}
</tbody>
</table>
</div>
);
}
}
export default UsersView
The following code defines how the selection works:
var fetchGET = function fetchGET(endpoint, parameters){
var url = process.env.__API__ + endpoint;
if(parameters){
url = url + '?';
for (var key in parameters){
url=url + key + '=' + parameters[key] + ',';
}
url = url.slice(0, -1);
}
var headers = buildHeaders();
return fetch(url, {
method: 'GET',
headers: headers
}).then(function (response) {
return response.json()
})
}
I could not find a similar problem on the net. If anyone has an understanding, I would really appreciate it.
UPDATE
I noticed that this problem only occurs in development built from webpack. Production assembly does not suffer from this.
UPDATE
Here is the code buildHeadersfor the request:
function buildHeaders(){
var headers = {
'Accept': 'application/json',
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*'
}
var token = localStorage.getItem('token');
if(token !== null) {
headers['Authorization'] = 'Token ' + token;
}
return headers;
}