Я создал небольшое приложение реагирования, которое визуализирует контейнер swagger. Контейнер получает свою конфигурацию из ConfigURL - по этому URL-адресу доступен файл конфигурации json.
URL-адрес конфигурации относится к порту 8080 локального хоста, где локальное приложение генерирует и обслуживает этот файл json.
Задача этого внутреннего приложения на локальном компьютере - присвоить данные о моих различных сервисах и сгенерировать файл конфигурации swagger - в настоящий момент он просто обслуживает жестко закодированный файл json.
(если вы делаете запрос get на localhost: 8080, например, откройте его в браузере, вы получите этот файл).
Сокращенный и цензурный пример JSON.
{
"swagger": "2.0",
"info": {
"version": "v1",
"title": project title
},
"schemes": "https",
"host": "my.services.host",
"basePath": "/",
"tags": [
{
"name": "service1-controller",
"description": "Service 1 Controller"
},
{
"name": "service2-controller",
"description": "service 2 Controller"
},
],
"security": [
{
"Bearer": []
}
],
"paths": {
"/ser1": {
"get": {
"tags": [
"service1-controller"
],
"summary": "appropriate summary",
"operationId": "geStuffUsingGET",
"produces": [
"application/xml",
"application/json"
],
"parameters": [
{
"name": "country",
"in": "query",
"description": "country",
"required": true,
"type": "string"
},
{
"name": "lang",
"in": "query",
"description": "lang",
"required": false,
"type": "string"
},
],
"responses": {
"200": {
"description": "OK",
"schema": {
"$ref": "#/definitions/Ser1Response"
}
},
"401": {
"description": "Unauthorized"
},
"403": {
"description": "Forbidden"
},
"404": {
"description": "Not Found"
}
},
"deprecated": false
}
},
"/ser2": {
"get": {
"tags": [
"service2-controller"
],
"summary": "appropriate summary",
"operationId": "geStuffUsingGET",
"produces": [
"application/xml",
"application/json"
],
"parameters": [
{
"name": "country",
"in": "query",
"description": "country",
"required": true,
"type": "string"
},
],
"responses": {
"200": {
"description": "OK",
"schema": {
"$ref": "#/definitions/Ser2Response"
}
},
"401": {
"description": "Unauthorized"
},
"403": {
"description": "Forbidden"
},
"404": {
"description": "Not Found"
}
},
"deprecated": false
}
},
}
"definitions": {
"Ser1response": {
"type": "object",
"properties": {
"name": {
"type": "string"
},
},
"title": "Ser1response"
},
}
},
"securityDefinitions": {
"Bearer": {
"type": "apiKey",
"name": "apikey",
"in": "query"
}
}
}
В действительности у него больше сервисов с большим количеством определений для объекта ответа. Но вы получаете суть - все услуги используют
API-ключ в запросе, так что у пользователя есть возможность ввести API-ключ в поле авторизации червя, после чего все запросы будут иметь этот ключ в качестве параметра запроса?
Эта часть отлично работает, а также, кажется, не спусковой крючок для других пропов. Даже если я удалю все, что связано с авторизацией, все еще сохраняются следующие проблемы.
Проблема связана с другими параметрами запроса. Если я выберу «попробовать» и введу строковую переменную запроса, такую как lang,
затем при нажатии кнопки «execute» поле будет очищено, а созданная команда curl не содержит параметр запроса.
(он содержит apikey, если я сохраню определение безопасности и авторизуюсь сам)
Если я введу обязательный параметр запроса, например, страну, нажмите «выполнить», чтобы очистить поле - оно станет красным и сфокусироваться - очевидно, предупреждение о том, что мне нужно ввести требуемый параметр. Но я ведь уже вошел в нее?
Элемент чванства в реакции
import React, {Component} from 'react';
import PropTypes from 'prop-types';
import SwaggerUi, {presets} from 'swagger-ui';
import 'swagger-ui/dist/swagger-ui.css';
class SwaggerUI extends Component {
componentDidMount() {
SwaggerUi({
defaultModelsExpandDepth: -1,
dom_id: '#swaggerContainer',
url: this.props.url,
spec: this.props.spec,
presets: [presets.apis],
});
}
render() {
return (
<div id="swaggerContainer" />
);
}
}
SwaggerUI.propTypes = {
url: PropTypes.string,
spec: PropTypes.object
};
SwaggerUI.defaultProps = {
url: `/v2/api-docs`
};
export default SwaggerUI
Основной элемент приложения
import React, { Component } from 'react';
import './App.css';
import SwaggerUI from './components/swagger';
class App extends Component {
render() {
return (
<div>
<SwaggerUI/>
</div>
)
}
}
export default App;
чтобы избежать ошибок CORS, которые я поставил
"proxy": "http://localhost:8080"
в моем package.json - файл Json подается на другой порт и может вызвать ошибку CORS.
Примечание: если я заменю configurl внутри компонента swagger на пример swagger по умолчанию.
SwaggerUI.defaultProps = {
url: `http://petstore.swagger.io/v2/swagger.json`
};
Проблема, кажется, сохраняется - например, поиск питомца по идентификатору (который является целочисленным параметром пути) будет действовать точно
как параметр страны в моем примере - я ввожу требуемый параметр в поле, нажмите «Выполнить» и получите целенаправленный
на пустое красное поле потом. Interestinlgy / pet / findByStatus, где есть выделение, отлично работает - проблема
похоже с заполнением полей.
Контейнер swagger, по-видимому, работает по назначению - когда я оставляю себя неавторизованным и нажимаю «Выполнить», я получаю ответ 401, когда я авторизируюсь и нажимаю, я получаю ответ пустого массива с тем, что я должен получить, если я не укажу параметры запроса lang или country. Я хотел бы указать их и получить другие ответы.
Есть ли что-то в файле конфигурации swson json или, более вероятно, в компоненте Swagger, который необходимо изменить?