How Web CORS is used across domains

CORS Reference

Http://enable-cors.org/index.html https://help.aliyun.com/document_detail/oss/practice/cors_guide.html

Homologous policy

跨域访问，或者说JavaScript的跨域访问问题，是浏览器出于安全考虑而设置的一个限制，即同源策略。当来自于A网站的页面中的JavaScript代码希望访问B网站的时候，浏览器会拒绝该访问，因为A，B两个网站是属于不同的域。

在实际应用中，经常会有跨域访问的需求，比如用户的网站www.a.com，后端使用了OSS。在网页中提供了使用JavaScript实现的上传功能，但是在该页面中，只能向www.a.com发送请求，向其他网站发送的请求都会被浏览器拒绝。这样就导致用户上传的数据必须从www.a.com中转。如果设置了跨域访问的话，用户就可以直接上传到OSS而无需从www.a.com中转。

Cors Introduction

Cross-domain resource sharing (cross-origin Resource sharing), or cors, is a standard cross-domain solution provided by HTML5, and specific cors rules can refer to the Cors specification.

Cors is a set of control policies that the browser follows to interact with the header of the HTTP. When the browser identifies the originating request as a cross-domain request, the header of origin is added to the HTTP request and sent to the server, as in the example above, Origin's header is www.a.com. After the server receives this request, it will determine whether to allow the request of the source domain according to certain rules, and if so, the server will be accompanied by the Access-control-allow-origin header in the returned response. The content is www.a.com to indicate that cross-domain access is allowed. If the server allows all cross-domain requests, the Access-control-allow-origin header is set to *, and the browser determines whether the cross-domain request succeeds based on whether or not the corresponding header is returned, and if no corresponding header is attached, The browser will intercept the request.

The only simple scenario described above is that the Cors specification divides the request into two types, one for simple requests and the other for pre-test requests. The pre-inspection mechanism is a protection mechanism that prevents resources from being modified by requests that are not otherwise authorized. The browser sends an options HTTP request before sending the actual request to determine if the server can accept the cross-domain request. If it is not acceptable, the browser will directly block the subsequent actual request to occur.

You do not need to send a preflight request until the following two conditions are met:

The request method is one of the following:

GET
HEAD
POST
All headers are listed in the following list:

Cache-control
Content-language
Content-type
Expires
Last-modified
Pragma
The preflight request comes with some information about the next request to the server, mainly in the following ways:

Origin: Source domain information for the request
Access-control-request-method: The next request type, such as post, get, and so on.
Access-control-request-headers: The next request contains a list of headers explicitly set by the user.
After the server receives the request, it will determine whether to allow the cross-domain request based on the information provided, and the return of the information is also done through the header:

Access-control-allow-origin: Allow cross-domain Origin list
Access-control-allow-methods: List of methods allowed across domains
Access-control-allow-headers: Allow list of headers across domains
Access-control-expose-headers: A list of headers that are allowed to be exposed to JavaScript code.
Access-control-max-age: Maximum browser cache time, unit S.
Depending on the return information above, the browser will determine whether to continue sending the actual request. Of course, without these headers the browser will block the next request directly.

One thing that needs to be emphasized here is that the above behavior is done automatically by the browser and the user does not have to pay attention to these details. If the server is configured correctly, it is the same as a normal non-cross-domain request.

Java Web Server Configuration

Maven Dependency

<Dependency>    <groupId>Com.thetransactioncompany</groupId>    <Artifactid>Cors-filter</Artifactid>    <version>2.5</version></Dependency>

Web. XML JOIN Configuration

<Filter>    <Filter-name>CORS</Filter-name>    <Filter-class>Com.thetransactioncompany.cors.CORSFilter</Filter-class>    <Init-param>        <Param-name>Cors.alloworigin</Param-name>        <Param-value>*</Param-value>    </Init-param>    <Init-param>        <Param-name>Cors.supportedmethods</Param-name>        <Param-value>GET, POST, HEAD, PUT, DELETE</Param-value>    </Init-param>    <Init-param>        <Param-name>Cors.supportedheaders</Param-name>        <Param-value>Accept, Origin, X-requested-with, Content-type, last-modified</Param-value>    </Init-param>    <Init-param>        <Param-name>Cors.exposedheaders</Param-name>        <Param-value>Set-cookie</Param-value>    </Init-param>    <Init-param>        <Param-name>Cors.supportscredentials</Param-name>        <Param-value>True</Param-value>    </Init-param>    <Init-param>        <Param-name>Cors.maxage</Param-name>        <Param-value>3600</Param-value>    </Init-param></Filter><filter-mapping>    <Filter-name>CORS</Filter-name>    <Url-pattern>/*</Url-pattern></filter-mapping>

Other cross-domain scenarios

Document.domain scenario, provided that the same base domain name is required

Iframe

How Web CORS is used across domains