SOLVED
Dear All,
I have OpenAPI Specs 3.0 that has APIs doing the below:
Get presigned url --> response is 307 redirect to AWS S3 to get the image
Image is downloaded but not displayed and I get the below error:
swaggerui Undocumented Error: OK
When I click on the JS I found the beow but can't make sense out of it:
_context.prev = 14;_context.next = 17;return (request.userFetch || fetch)(request.url, request);case 17:res = _context.sent;_context.next = 20;return http_self.serializeRes(res, url, request);case 20:res = _context.sent;if (!request.responseInterceptor) {_context.next = 28;break;}_context.next = 24;return request.responseInterceptor(res);case 24:_context.t1 = _context.sent;if (_context.t1) {_context.next = 27;break;}_context.t1 = res;case 27:res = _context.t1;case 28:_context.next = 38;break;case 30:_context.prev = 30;_context.t2 = _context["catch"](14);if (res) {_context.next = 34;break;}throw _context.t2;case 34:error = new Error(res.statusText);error.statusCode = error.status = res.status;error.responseError = _context.t2;throw error;case 38:if (res.ok) {_context.next = 43;break;}_error = new Error(res.statusText);_error.statusCode = _error.status = res.status;_error.response = res;throw _error;case 43:return _context.abrupt("return", res);case 44:case "end":return _context.stop();}}}, _callee, null, [[14, 30]]);}));return _http.apply(this, arguments);}var shouldDownloadAsText = function shouldDownloadAsText() {var contentType = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';return /(json|xml|yaml|text)\b/.test(contentType);};function parseBody(body, contentType) {if (contentType && (contentType.indexOf('application/json') === 0 || contentType.indexOf('+json') > 0)) {return JSON.parse(body);}return external_js_yaml_default.a.safeLoad(body);} // Serialize the response, returns a promise with headers and the body part of the hash
Cheers,
adam
I have downloaded Redux DevTools for Developers and I did manage to find the issue with the code. After fixing the code, the problem got resolved and I was able to load the image into the swaggerui.
Error spotted using Redux DevTools:
oldCode:
<script>
window.onload = function() {
var appKey = '';
var idToken = '';
var accessToken = '';
var replaceAppKey = false;
const ui = SwaggerUIBundle({
url: Drupal.settings.nsw_theme.swagger_url,
dom_id: '#tryit',
displayRequestDuration: true,
withCredentials: true,
filter: true,
showExtensions: true,
showCommonExtensions: true,
validatorUrl: "https://validator.swagger.io/validator",
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIStandalonePreset
],
parameterMacro: function (operation, parameter) {
if((parameter.name == "X-API-Key" ||
parameter.name == "apikey" ||
parameter.name == "x-apikey") && replaceAppKey) {
parameter.example = appKey;
}else if(parameter.name == "X-Id-Token") {
parameter.example = idToken;
}else if(parameter.name == "X-Access-Token") {
parameter.example = accessToken;
}
},
onComplete: function(swaggerApi, swaggerUi) {
// "ApiKeyAuth" is the key name of the security scheme in securityDefinitions
var result = getApiKey();
if(result.httpStatusCode == 200 && result.appKey != ""){
appKey = result.appKey;
appName = result.appName;
Swal.fire({
title: 'Replace App key?',
text: 'We found that one of your Apps (' + appName + ') have access to this API Product. We can replace all App keys in the OpenAPI Specs with your App Key.',
icon: 'question',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, replace it!'
}).then((result) => {
if (result.value) {
ui.preauthorizeApiKey("ApiKeyAuth", appKey);
replaceAppKey = true;
Swal.fire(
'Replaced!',
'All App keys have been replaced in the current OpenAPI specs.',
'success'
)
}
});
}else{
if(result.httpStatusCode != 200){
Swal.fire({
icon: 'error',
title: 'Oops...' + result.httpStatusCode,
html: result.message,
footer: '<a href="/help">Why do I have this issue?</a>'
});
}
}
},
requestInterceptor: function (request) {
var headers = request.headers || {};
if (headers["X-Id-Token"]) {
headers["X-Id-Token"] = idToken;
}else if(headers["client_id"]) {
headers["client_id"] = accessToken;
}
return request;
},
responseInterceptor: function (response) {
var headers = response.headers || {};
if (response.obj.IdToken) {
idToken = response.obj.IdToken;
}else if(response.obj.id_token) {
idToken = response.obj.id_token;
}
if (response.obj.AccessToken) {
accessToken = response.obj.AccessToken;
}else if(response.obj.access_token) {
accessToken = response.obj.access_token;
}
return response;
}
})
window.ui = ui
}
function getApiKey() {
"use strict";
var domainName = window.location.hostname;
var apiPath = "/app/developer_apps/app.json";
var apiURI = "https://test:test@" + domainName + apiPath;
var apiMethod = "GET";
var httpStatusCode = "";
var message = "";
var appName = "";
var appKey = "";
var appSecret = "";
jQuery.ajax({
async: false,
type: apiMethod,
url: apiURI,
dataType: "json",
statusCode: {
200: function(responseData) {
httpStatusCode = "200";
message = "Retrieved LoggedIn user summary list of Apps successfully";
},
204: function(responseData) {
httpStatusCode = "204";
message = `Retrieved LoggedIn user summary list of Apps is empty
Please create an App to be able to experience what this API
product can offer`;
},
401: function(responseData) {
httpStatusCode = "401";
message = `Unable to retrieved LoggedIn user summary list of Apps.
If you want, you can <a href="https://developer-dev.testservicensw.net/user/login">login</a> so that you can experience what this API
product can offer to your App; otherwise just click Ok`;
},
403: function(responseData) {
httpStatusCode = "403";
message = "Received unauthorized while trying to retrieved LoggedIn user summary list of Apps";
},
404: function(responseData) {
httpStatusCode = "404";
message = "Received resource not found while trying to retrieved LoggedIn user summary list of Apps";
}
},
error: function(responseData){
httpStatusCode = responseData.status;
message = "Received unknown error";
},
}).done(function(responseData){
if(httpStatusCode == 200) {
jQuery.each(responseData, function(index, value) {
var dotIndex = Drupal.settings.nsw_theme.swagger_file_name.indexOf(".");
var apiProductName = Drupal.settings.nsw_theme.swagger_file_name.substring(0, dotIndex);
if(apiProductName.toLowerCase() === value.apiProducts[0].toLowerCase()){
appName = value.appName;
appKey = value.consumerKey;
appSecret = value.consumerSecret;
}else{
message = "Couldn't find a product match in your list of apps";
}
});
}
});
return {
"httpStatusCode": httpStatusCode,
"message": message,
"appName": appName,
"appKey": appKey,
"appSecret": appSecret
};
}
</script>
<!--
*
* End of Swagger UI Configuration
* -------------------------------
*
-->NEWCode:
The section that was changed was the responseInterceptor section
<script>
window.onload = function() {
var appKey = '';
var idToken = '';
var accessToken = '';
var replaceAppKey = false;
const ui = SwaggerUIBundle({
url: Drupal.settings.nsw_theme.swagger_url,
dom_id: '#tryit',
displayRequestDuration: true,
withCredentials: true,
filter: true,
showExtensions: true,
showCommonExtensions: true,
validatorUrl: "https://validator.swagger.io/validator",
presets: [
SwaggerUIBundle.presets.apis,
SwaggerUIStandalonePreset
],
parameterMacro: function (operation, parameter) {
if((parameter.name == "X-API-Key" ||
parameter.name == "apikey" ||
parameter.name == "x-apikey") && replaceAppKey) {
parameter.example = appKey;
}else if(parameter.name == "X-Id-Token") {
parameter.example = idToken;
}else if(parameter.name == "X-Access-Token") {
parameter.example = accessToken;
}
},
onComplete: function(swaggerApi, swaggerUi) {
// "ApiKeyAuth" is the key name of the security scheme in securityDefinitions
var result = getApiKey();
if(result.httpStatusCode == 200 && result.appKey != ""){
appKey = result.appKey;
appName = result.appName;
Swal.fire({
title: 'Replace App key?',
text: 'We found that one of your Apps (' + appName + ') have access to this API Product. We can replace all App keys in the OpenAPI Specs with your App Key.',
icon: 'question',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'Yes, replace it!'
}).then((result) => {
if (result.value) {
ui.preauthorizeApiKey("ApiKeyAuth", appKey);
replaceAppKey = true;
Swal.fire(
'Replaced!',
'All App keys have been replaced in the current OpenAPI specs.',
'success'
)
}
});
}else{
if(result.httpStatusCode != 200){
Swal.fire({
icon: 'error',
title: 'Oops...' + result.httpStatusCode,
html: result.message,
footer: '<a href="/help">Why do I have this issue?</a>'
});
}
}
},
requestInterceptor: function (request) {
var headers = request.headers || {};
if (headers["X-Id-Token"]) {
headers["X-Id-Token"] = idToken;
}else if(headers["client_id"]) {
headers["client_id"] = accessToken;
}
if (headers["Use-Proxy"]) {
if (headers["Use-Proxy"] != "") {
request.url = headers["Use-Proxy"] + "?url=" + request.url;
headers["Use-Proxy"] = "";
}
}
return request;
},
responseInterceptor: function (response) {
var headers = response.headers || {};
if (response.obj) {
if ("IdToken" in response.obj) {
idToken = response.obj.IdToken;
}else if(response.obj.id_token) {
idToken = response.obj.id_token;
}
if (response.obj.AccessToken) {
accessToken = response.obj.AccessToken;
}else if(response.obj.access_token) {
accessToken = response.obj.access_token;
}
}
return response;
}
})
window.ui = ui
}
function getApiKey() {
"use strict";
var domainName = window.location.hostname;
var apiPath = "/app/developer_apps/app.json";
var apiURI = "https://test:test@" + domainName + apiPath;
var apiMethod = "GET";
var httpStatusCode = "";
var message = "";
var appName = "";
var appKey = "";
var appSecret = "";
jQuery.ajax({
async: false,
type: apiMethod,
url: apiURI,
dataType: "json",
statusCode: {
200: function(responseData) {
httpStatusCode = "200";
message = "Retrieved LoggedIn user summary list of Apps successfully";
},
204: function(responseData) {
httpStatusCode = "204";
message = `Retrieved LoggedIn user summary list of Apps is empty
Please create an App to be able to experience what this API
product can offer`;
},
401: function(responseData) {
httpStatusCode = "401";
message = `Unable to retrieved LoggedIn user summary list of Apps.
If you want, you can <a href="https://developer-dev.testservicensw.net/user/login">login</a> so that you can experience what this API
product can offer to your App; otherwise just click Ok`;
},
403: function(responseData) {
httpStatusCode = "403";
message = "Received unauthorized while trying to retrieved LoggedIn user summary list of Apps";
},
404: function(responseData) {
httpStatusCode = "404";
message = "Received resource not found while trying to retrieved LoggedIn user summary list of Apps";
}
},
error: function(responseData){
httpStatusCode = responseData.status;
message = "Received unknown error";
},
}).done(function(responseData){
if(httpStatusCode == 200) {
jQuery.each(responseData, function(index, value) {
var dotIndex = Drupal.settings.nsw_theme.swagger_file_name.indexOf(".");
var apiProductName = Drupal.settings.nsw_theme.swagger_file_name.substring(0, dotIndex);
if(apiProductName.toLowerCase() === value.apiProducts[0].toLowerCase()){
appName = value.appName;
appKey = value.consumerKey;
appSecret = value.consumerSecret;
}else{
message = "Couldn't find a product match in your list of apps";
}
});
}
});
return {
"httpStatusCode": httpStatusCode,
"message": message,
"appName": appName,
"appKey": appKey,
"appSecret": appSecret
};
}
</script>
<!--
*
* End of Swagger UI Configuration
* -------------------------------
*
-->
</div>
Result after fixing the code:
