SAP 电商云 Spartacus UI 客户系统的跨域请求

CORS(跨域资源共享)是一个系统,由传输 HTTP 标头组成,用于确定浏览器是否阻止前端 JavaScript 代码访问跨域请求的响应。

同源安全策略禁止跨域访问资源。 但是 CORS 使 Web 服务器能够表示他们希望选择允许跨域访问其资源。

Access-Control-Allow-Methods

指定在访问资源以响应预检请求时允许的一种或多种方法。上面的例子为 POST.

Access-Control-Allow-Headers

用于响应预检请求,以指示在发出实际请求时可以使用哪些 HTTP 标头。上面的例子为 content-type.

CORS 预检请求(preflight)是一个 CORS 请求,用于检查 CORS 协议是否被理解以及服务器是否使用特定的方法和标头知道。

这是一个 OPTIONS 请求,使用三个 HTTP 请求标头:Access-Control-Request-Method、Access-Control-Request-Headers 和 Origin 标头。

预检请求由浏览器自动发出,在正常情况下,前端开发人员不需要自己制作此类请求。 它出现在请求被限定为“预检”并且对于简单请求被省略时。

例如,在发送 DELETE 请求之前,客户端可能会通过使用预检请求询问服务器是否允许 DELETE 请求:

OPTIONS /resource/foo
Access-Control-Request-Method: DELETE
Access-Control-Request-Headers: origin, x-requested-with
Origin: https://foo.bar.org

如果服务器允许,那么它将使用 Access-Control-Allow-Methods 响应标头响应预检请求,其中列出了 DELETE:

HTTP/1.1 204 No Content
Connection: keep-alive
Access-Control-Allow-Origin: https://foo.bar.org
Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE
Access-Control-Max-Age: 86400

可以选择使用 Access-Control-Max-Age 标头为在同一 URL 中创建的请求缓存预检响应,如上例所示。 为了缓存预检响应,浏览器使用与浏览器管理的通用 HTTP 缓存不同的特定缓存。 预检响应永远不会缓存在浏览器的通用 HTTP 缓存中。

对于上图 Spartacus 系统的例子,服务器允许跨域访问:

猜你喜欢

转载自blog.csdn.net/i042416/article/details/125921670