What is cross-domain access?
Cross-domain access is to request resources from one domain to another domain through HTTP requests.
Impact point: If the server does not return the allowed header, the resource cannot be obtained, resulting in service unavailability. This is common in front-end and back-end separation projects, CDN acceleration services, etc.;
The meaning of domain: protocol, domain name, port combination . If any of the three are not equal, it is regarded as cross-domain.
Cross-domain examples
| type | Sample A | Sample B | Is it cross-domain? |
|---|---|---|---|
| protocol issues | http://www.example.com | https://www.example.com | Cross domain |
| Domain name problem | https://ftp.example.com | https://www.example.com | Cross domain |
| Port problem | https://www.example.com:80 | https://www.example.com:81 | Cross domain |
Why there is a same-origin policy (the reason for cross-domain problems)
The same origin policy is an important security policy that restricts how documents from one origin or scripts loaded by it can interact with resources from another origin. It can help block malicious documents and reduce possible attack vectors.
For example,
under a regular browser, if you log in to website A and then unintentionally open website B (phishing, malicious website), website B will grab your cookies, call the interface of website A, and obtain sensitive information, leading to information leakage. , or even loss of funds, and the same-origin policy is to solve the authentication process (implemented by browser) when B calls A website, thereby denying B access to A.
Therefore, when we configure the parameters introduced below, we need to always pay attention to the security issues of the current service, so as to configure a reasonable and safe configuration.
Description of common parameters
| Header parameters | meaning | Common settings |
|---|---|---|
| Access-Control-Allow-Origin | Used to solve the problem of cross-domain permissions of resources. The domain value defines the domain that is allowed to access the resource. The wildcard character "*" can be set to allow requests from all domains. | Access-Control-Allow-Origin: * Access-Control-Allow-Origin: <origin> |
| Access-Control-Max-Age | The Access-Control-Max-Age This response header indicates how long the return results of the preflight request (that is, the information provided by Access-Control-Allow-Methods and Access-Control-Allow-Headers) can be cached. Setting this value can avoid Frequent OPTIONS requests | Access-Control-Max-Age: <delta-seconds> |
| Access-Control-Request-Method | The request header Access-Control-Request-Method appears in the preflight request (preflight request) and is used to inform the server which HTTP method will be used in the actual request. Because the method used in preflight requests is always OPTIONS, which is different from the method used in actual requests, this request header is necessary. | Access-Control-Allow-Methods: POST, GET, OPTIONS |
| Access-Control-Allow-Credentials | The Access-Control-Allow-Credentials response header is used to tell the browser whether the response to the request can be exposed to front-end JavaScript code when the request requires credentials (the value of Request.credentials is include). | Access-Control-Allow-Credentials: true |
Special Note
- Access-Control-Max-Age: Setting the cache time can improve performance, but different browsers have their own upper limit for cache time, that is, your configuration is very long, but it will not actually meet your expectations. Generally, it is recommended to configure 86400 is enough.