This article mainly introduces the solution of page 504 gateway time-out
1. 504 gateway time out reason?
Because of the browser access interface request, the default timeout event is 1 minute. When the 504 interface timeout is encountered, first we need to see whether the Ajax interface request is set Timeout. Next, check whether nginx has set the agent timeout.
2. Inspection procedure
1. Front end Ajax settings
$.ajax({
url: '',
type: 'post',
data: postData,
timeout: 1000*60*10,
success: function(data){
console.log(data)
},
complete:function(XHR,TextStatus){
if(TextStatus=='timeout'){
console.log("Timeout");
}
}
})
2. Nginx agent timeout setting
proxy_connect_timeout 600;
proxy_read_timeout 600;
proxy_send_timeout 600;
proxy_buffering off;
proxy_buffer_size 128k;
proxy_buffers 100 128k;
3、 Problem extension (native JS encapsulates Ajax requests)
At that time, the Ajax request of jQuery was used, and the datatype: JSON was uniformly defined by the interface. Due to the file flow returned by the interface, the successful callback was not triggered and did not want to modify the datatype. Therefore, the Ajax request was encapsulated with native JS.
getAjax(url,callback){
var timeoutFlag=null;
var xhr=new XMLHttpRequest();
var url=""//request path, get request can spell the parameters into the address
xhr.open(type,url,async);//type request type url address async whether asynchronous request
xhr.responseType='blob';//If the return data is a file stream, you can set it to blob type
xhr.timeout=1000*60*60;//timeout time This is set to one hour
xhr.setRequestHeader('token',token);//set header token
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
window.clearTimeout(timeoutFlag);
if(xhr.status==200 || xhr.status==304){
callback(xhr.response);
}
}
}
xhr.send(data);
timeoutFlag=window.setTimeout(function(){
window.clearTimeout(timeoutFlag);
xhr.abort();
},xhr.timeout);
}
getAjax('URL',function(res){
})
Read More:
- Difference between contenttype and datatype in Ajax request of jquery
- If the request parameter is formdata, use the Ajax operation
- [Solved] Vue project deploys nginx to refresh the interface 404 Error
- Localstorage sets the expiration time.
- Postman Error: Could not send request [How to Solve]
- How to Set Time Zone in Golang
- Vue a page is mounted to send multiple requests at the same time, and the loading is processed uniformly
- Solve the asynchronous execution of callback function in Axios request processing interceptor
- [Solved] React Startup Error at the First time :SyntaxError: Unexpected token
- JS getting ${pageContext.request.contextPath} Get the root path of the project
- Trigger http request when tab page is closed in angular2+ project
- Error:Request failed with status code 401 [How to Solve]
- Golang: How to Read File All Content in one time
- [Solved] Vue Compile Error: JavaScript heap out of memory
- [Solved] Project Package Error: Javascript heap out of memory
- [Solved] Font End Image Display Error: net::ERR_CONNECTION_RESET 431 (Request Header Fields Too Large)
- [Solved] nodejs Error: request entity too large
- Android realizes the fade in and fade out of animation effect
- [Solved] Ineffective mark-compacts near heap limit Allocation failed – JavaScript heap out of memory
- [Solved] Vue Project Modify Page Error: CALL_AND_RETRY_LAST Allocation failed – JavaScript heap out of memory