Swagger UI上的CORS问题

时间:2015-09-09 13:29:11

标签: swagger swagger-ui swagger-2.0

有人可以告诉我为什么会收到这些错误。

$query = Product::query();
    $query->company();
    $query->with('category'); $result=ApiHandler::parseMultiple($query);
    return $result->getResponse(); 

我正在尝试在端口说9090上运行Swagger UI,在9000上运行Swagger API文档并尝试在UI中显示文档。

我在API文档服务器(端口9000)上添加了CORS过滤器,如下所示。

 GET http://127.0.0.1:9000/api-docs/service.json

  200 OK 4ms    swagger-ui.js (line 30261)
  Unable to Load SwaggerUI  /api-docs/ (line 83)
  Cross-Origin Request Blocked: The Same Origin Policy disallows 
  reading the remote resource at http://127.0.0.1:9000/api-
   docs/service.json. This can be fixed by moving the resource to the 
  same domain or enabling CORS.
  uncaught exception: Can't read from server. It may not have the 
 appropriate access-control-origin settings.

firefox V33.0中的请求和响应标头是

 FilterHolder cors = swaggerUIContext.addFilter(CrossOriginFilter.class,"/*",EnumSet.of(DispatcherTyp‌ e.REQUEST)); 
cors.setInitParameter(CrossOriginFilter.ALLOWED_ORIGINS_PARAM, "*");       
cors.setInitParameter(CrossOriginFilter.ACCESS_CONTROL_ALLOW_ORIGIN_HEADER, ""); 
cors.setInitParameter(CrossOriginFilter.ALLOWED_METHODS_PARAM, "GET,POST,HEAD"); 
 cors.setInitParameter(CrossOriginFilter.ALLOWED_HEADERS_PARAM, "Content-Type, api_key, Authorization"); 

以下是我在服务器上设置CORS的方法

 Response Headers
   Content-Length   428
   Content-Type application/json

   Request Headers
     Accept application/json;charset=utf-8,*/*
     Accept-Encoding    gzip, deflate
     Accept-Language    en-US,en;q=0.5
     Connection keep-alive
     Host   localhost:9000
    Origin  http://localhost:9090
    Referer http://localhost:9090/api-docs/
     User-Agent Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:33.0)       
    Gecko/20100101 Firefox/33.0

5 个答案:

答案 0 :(得分:1)

您是否使用json文件做了一些时髦的事情?

我在尝试修改我的JSON文件并查看Chrome上的更改时遇到了同样的错误。确保json本身不会以某种方式破坏,一个额外的括号,逗号等等。我从头开始使用swagger现场演示中的一个示例json,我很好。我知道这是一项任务但是对我有用,至少加载了UI!

你也可以通过swagger ui自述文件CORS support section

答案 1 :(得分:1)

我能够通过在我的应用程序中添加以下方法来实现它。请注意,这也会打开API,以便您可以接受CrossOrigin请求。 addMapping()位的详细信息取决于您,但此示例可以从任何地方打开所有内容。这是全班。

@SpringBootApplication
@EnableSwagger2
public class Application {
  public static void main(String[] args) {
    SpringApplication.run(Application.class, args);
  }

  @Bean
  public WebMvcConfigurer corsConfigurer() {
    return new WebMvcConfigurerAdapter() {
      @Override
      public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**").allowedOrigins("*");
      }
    };
  }
}

答案 2 :(得分:1)

如果您使用的是Spring Security

请添加此代码。

@Override
protected void configure(HttpSecurity http) throws Exception {

    http.cors().configurationSource(request -> 
        {
            CorsConfiguration cors = new CorsConfiguration();
                cors.setAllowedMethods(
                    Arrays.asList(HttpMethod.DELETE.name(),HttpMethod.GET.name(), HttpMethod.POST.name()));
                cors.applyPermitDefaultValues();

            return cors;

        }).httpBasic(); 

}

说明:

在上面的CorsConfiguration类中,我使用两种方法。

  1. cors.applyPermitDefaultValues();

  2. cors.setAllowedMethods(请求类型名称列表);

此方法cors.applyPermitDefaultValues();将允许所有主机的跨源请求。  通常,此方法支持对这3种请求类型方法GET,HEAD和PUT的跨源支持。

如果您的API公开了PUT,DELETE或任何其他请求方法。然后,您需要使用此cors.setAllowedMethods();

覆盖它。

答案 3 :(得分:0)

我刚遇到类似问题:Swagger UI: HTTP Content-type "application/json" causes "Unable to Load SwaggerUI"

尝试将GET service.json响应的HTTP Content-type标头从“application / json”更改为“text / html”,甚至删除它。我不知道为什么,但它似乎对Swagger UI产生了影响。

答案 4 :(得分:0)

我也遇到了这个问题,检查了宠物店示例中的标头后,我发现“ Access-Control-Allow-Headers”需要“ Content-Type,api_key,Authorization”。

请确保您有 api_key 以及我缺少的文件。