Question

我正在尝试在标头中添加Access-Control-Allow-Origin。为此，我添加了这一行：

window.swaggerUi.api.clientAuthorizations.add("headerKey", apiKeyAuth);
window.swaggerUi.api.clientAuthorizations.add("headerKey", new  SwaggerClient.ApiKeyAuthorization('Allow-Access-Control-Origin', '*', "header"));

不幸的是，当我探索请求标题时，我得到了这个：

Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:accept, developer_key, access-control-allow-origin
Access-Control-Request-Method:GET
Connection:keep-alive

请求标头中没有添加额外的自定义标头。它将我的_access-control-allow-origin_作为值添加到Access-Control-Request-Headers。

我想将此_access-control-allow-origin_添加为新的自定义标头，如：

Accept:*/*
Accept-Encoding:gzip, deflate, sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:accept, developer_key
Access-Control-Allow-Origin: *
Access-Control-Request-Method:GET
Connection:keep-alive

任何人都可以告诉我，我做错了什么，或者我应该做些什么来完成这项工作？

Answer 1

看起来你想通过从客户端的Swagger UI a.k.a添加Access-Control-Allow-Origin标头来启用CORS。但是，您应该在服务器端启用CORS。 Swagger UI Wiki也指出：

启用CORS的方法取决于您用来托管应用程序的服务器和/或框架。

关于CORS的简短背景： 当Web浏览器和/或JavaScript工具包想要将HTTP请求发送到另一个域上的主机/服务器时，它会添加一些与CORS相关的标头，例如Access-Control-Request-Method（对于请求HTTP方法）和{ {1}}（用于HTTP请求中的标头列表）。在服务器端，如果允许请求方法和标头，服务器将发回具有Access-Control-Request-Header标头的HTTP响应。浏览器会阻止没有此标题的回复。

至于为什么标题出现在Access-Control-Allow-Origin中，原因是您的浏览器或JS工具包将Access-Control-Request-Headers:accept, developer_key, access-control-allow-origin视为您的代码发送到服务器的常规自定义标头。如果HTTP请求有效，则探测服务器。

您可以在此处了解有关CORS的更多信息：http://www.html5rocks.com/en/tutorials/cors/

您还可以参考此website了解有关如何在服务器上启用CORS的更多信息。

如何在swagger-api-explorer上添加自定义标头

1 个答案: