Swagger-UI、react应用程序-无法填充参数字段(或输入字段但未读取但已清除的数据)
我已经创建了一个小的react应用程序，它呈现了一个swagger，container.The容器从一个ConfigURL获取它的配置-在这个URL上有一个json配置文件可用。配置url引用本地主机端口8080，本地应用程序在该端口生成并提供该json文件。这个后端应用程序在本地机器上的任务是获取关于我的各种服务的数据并生成swagger配置文件--目前它只提供一个硬编码的json文件。(如果您在localhost:8080上执行get请求，例如，在浏览器中打开它，您会得到这个文件)。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-key，这样用户就有可能在随后的swagger授权字段中输入api - key，当你“尝试”时，所有的请求都会将这个key作为查询参数?apikey=keyyouentered附加。这部分运行得很好，似乎也不会触发其他提议。即使我删除了与授权相关的所有内容，以下问题仍然存在。
这个问题与其他查询参数一起出现。如果我选择"try it“并输入一个字符串查询变量，如lang，那么在"execute”push时，该字段将被清除，并且所生成的curl命令不包含查询参数。(如果我保留了security定义并为自己授权，它将包含apikey )如果我输入了一个必需的查询参数，比如country，按下"execute“将清除该字段-然后它将变成红色并聚焦-显然是一个警告，我需要输入一个必需的参数。但实际上我已经进入了它？
react中的swagger元素
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 SwaggerUIAPP的主要元素
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错误。
注意:如果我用一个swagger默认示例替换swagger组件内部的configurl。
SwaggerUI.defaultProps = {
url: `http://petstore.swagger.io/v2/swagger.json`
};这个问题似乎仍然存在-例如，通过id查找宠物(这是一个整数路径参数)的行为与我的示例中的country参数完全相同-我在字段中输入了所需的参数，单击execute，然后将一个焦点放到一个空的红色字段中。Interestinlgy /pet/findByStatus在有选择的地方工作得很好-问题似乎是在填写字段。
swagger容器似乎可以正常工作-当我让自己未经授权并单击execute时，会得到401响应；当我授权自己并单击时，会得到空数组响应，如果我没有指定lang或country查询参数，就会得到响应。不过，我想指定它们，并获得一些其他响应。
swagger json配置文件或Swagger组件中是否有需要更改的内容？
回答 1
Stack Overflow用户
发布于 2019-01-08 19:51:24
从这一点上看，React目前并不能很好地处理SwaggerUi。https://github.com/swagger-api/swagger-ui/issues/4745的解决方案是不使用React或尝试通过使用iframe或ShadowDom来隔离组件。
https://stackoverflow.com/questions/54087598
复制相似问题
腾讯云开发者
