注:本文仅供学习参考,如有错漏,望指正!
今天验证一个微服务框架的适用性,框架集成的Swagger发请求时提示如下异常,借此机会对CORS(跨域资源共享)了解一二:
Failed to fetch.
Possible Reasons:
CORS
Network Failure
URL scheme must be “http” or “https” for CORS request
关于CORS(跨域资源共享)的详细解读:
https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS
问题记录及解决方案
1、异常截图
2、产生异常的原因
下面这篇博文对跨域问题产生原因总结的简单易懂,直接参考↓
以下截图来自博文:【项目实战】-Spring-Cloud跨域方案汇总_springcloud跨域解决方案-CSDN博客
3、解决方案
- 方案一:在gateway中添加WebFilter,如(以下代码缺乏安全性,具体原因参考下文
关于附带身份凭证的请求与通配符
):
/**
* CORS 过滤
*
* @author ahsz
*/
@Slf4j
@RequiredArgsConstructor
@Order(Ordered.HIGHEST_PRECEDENCE)
@Configuration(proxyBeanMethods = false)
public class SecurityRuleFilter implements WebFilter {
@Override
@SuppressWarnings("all")
public Mono<Void> filter(ServerWebExchange exchange, WebFilterChain chain) {
/**
* 增加CORS
* 解决前端登录跨域的问题
*/
ServerHttpRequest request = exchange.getRequest();
if (CorsUtils.isCorsRequest(request)) {
log.info("添加CORS……");
ServerHttpResponse response = exchange.getResponse();
HttpHeaders headers = response.getHeaders();
headers.add("Access-Control-Allow-Origin", "*");
headers.add("Access-Control-Allow-Methods", "*");
headers.add("Access-Control-Max-Age", "3600");
headers.add("Access-Control-Allow-Headers", "*");
// 扩展自定义header项
// headers.add("Access-Control-Expose-Headers", "Content-Disposition");
// if (request.getMethod() == HttpMethod.OPTIONS) {
// response.setStatusCode(HttpStatus.OK);
// return Mono.empty();
// }
}
return chain.filter(exchange);
}
}
- 方案二:修改gateway网关配置信息,如下:
spring:
cloud:
gateway:
globalcors:
cors-configurations:
'[/**]':
allowedOrigins: "*"
allowedHeaders: "*"
allowedMethods: "*"
4、正常运行结果
关于CORS的一些杂记
下文仅为重要内容,详情见:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/CORS
1、关于附带身份凭证的请求与通配符
在响应附带身份凭证的请求时:
- 服务器不能将
Access-Control-Allow-Origin
的值设为通配符“*
”,而应将其设置为特定的域,如:Access-Control-Allow-Origin: https://example.com
。 - 服务器不能将
Access-Control-Allow-Headers
的值设为通配符“*
”,而应将其设置为标头名称的列表,如:Access-Control-Allow-Headers: X-PINGOTHER, Content-Type
- 服务器不能将
Access-Control-Allow-Methods
的值设为通配符“*
”,而应将其设置为特定请求方法名称的列表,如:Access-Control-Allow-Methods: POST, GET
对于附带身份凭证的请求(通常是 Cookie
),
这是因为请求的标头中携带了 Cookie
信息,如果 Access-Control-Allow-Origin
的值为“*
”,请求将会失败。而将 Access-Control-Allow-Origin
的值设置为 明确且安全的目标地址,则请求将成功执行。
另外,响应标头中也携带了 Set-Cookie
字段,尝试对 Cookie 进行修改。如果操作失败,将会抛出异常。
2、CORS涉及到的请求头
HTTP 响应标头字段
- Access-Control-Allow-Origin
响应标头中可以携带一个 Access-Control-Allow-Origin
字段,其语法如下:
Access-Control-Allow-Origin: <origin> | *
Access-Control-Allow-Origin
参数指定了单一的源,告诉浏览器允许该源访问资源。或者,对于不需要携带身份凭证的请求,服务器可以指定该字段的值为通配符“*
”,表示允许来自任意源的请求。
例如,为了允许来自 https://mozilla.org
的代码访问资源,你可以指定:
Access-Control-Allow-Origin: https://mozilla.org
Vary: Origin
如果服务端指定了具体的单个源(作为允许列表的一部分,可能会根据请求的来源而动态改变)而非通配符“*
”,那么响应标头中的 Vary
字段的值必须包含 Origin
。这将告诉客户端:服务器对不同的Origin
返回不同的内容。
- Access-Control-Expose-Headers
译者注:在跨源访问时,XMLHttpRequest
对象的 getResponseHeader()
方法只能拿到一些最基本的响应头,Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma,如果要访问其他头,则需要服务器设置本响应头。Access-Control-Expose-Headers
头将指定标头放入允许列表中,供浏览器的 JavaScript 代码(如 getResponseHeader()
获取。
Access-Control-Expose-Headers: <header-name>[, <header-name>]*
例如:
Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header
这样浏览器就能够通过 getResponseHeader
访问 X-My-Custom-Header
和 X-Another-Custom-Header
响应头了。
- Access-Control-Max-Age
Access-Control-Max-Age
头指定了 preflight 请求的结果能够被缓存多久,请参考本文在前面提到的 preflight 例子。
Access-Control-Max-Age: <delta-seconds>
delta-seconds
参数表示 preflight 预检请求的结果在多少秒内有效。
- Access-Control-Allow-Credentials
Access-Control-Allow-Credentials
头指定了当浏览器的 credentials
设置为 true 时是否允许浏览器读取 response 的内容。当用在对 preflight 预检测请求的响应中时,它指定了实际的请求是否可以使用 credentials
。请注意:简单 GET
请求不会被预检;如果对此类请求的响应中不包含该字段,这个响应将被忽略掉,并且浏览器也不会将相应内容返回给网页。
Access-Control-Allow-Credentials: true
- Access-Control-Allow-Methods
Access-Control-Allow-Methods
标头字段指定了访问资源时允许使用的请求方法,用于预检请求的响应。其指明了实际请求所允许使用的 HTTP 方法。
Access-Control-Allow-Methods: <method>[, <method>]*
有关预检请求的示例已在上方给出,包含了将此请求头发送至浏览器的示例。
- Access-Control-Allow-Headers
Access-Control-Allow-Headers
标头字段用于预检请求的响应。其指明了实际请求中允许携带的标头字段。这个标头是服务器端对浏览器端 Access-Control-Request-Headers
标头的响应。
Access-Control-Allow-Headers: <header-name>[, <header-name>]*
HTTP 请求标头字段
本节列出了可用于发起跨源请求的标头字段。请注意,这些标头字段无须手动设置。当开发者使用 XMLHttpRequest
对象发起跨源请求时,它们已经被设置就绪。
- Origin
Origin
标头字段表明预检请求或实际跨源请求的源站。
Origin: <origin>
origin 参数的值为源站 URL。它不包含任何路径信息,只是服务器名称。
注: origin
的值可以为 null
。
注意,在所有访问控制请求中,Origin
标头字段总是被发送。
- Access-Control-Request-Method
Access-Control-Request-Method
标头字段用于预检请求。其作用是,将实际请求所使用的 HTTP 方法告诉服务器。
Access-Control-Request-Method: <method>
- Access-Control-Request-Headers
Access-Control-Request-Headers
标头字段用于预检请求。其作用是,将实际请求所携带的标头字段(通过 setRequestHeader()
等设置的)告诉服务器。这个浏览器端标头将由互补的服务器端标头 Access-Control-Allow-Headers
回答。
Access-Control-Request-Headers: <field-name>[, <field-name>]*