Cross-domain error
Cross-domain is the browser's restriction on JavaScript's same-origin policy.
** If the domain name and port number are the same, but different request path, not across domains,
for example: www.gshop.com/goods; www.gshop.com/category
HTTP and also a cross-domain https
manage.gshop.com ; api.gshop.combelong cross-domain
Why are there cross-domain issues?
The cross-domain problem is a security restriction of the browser on Ajax requests, so an Ajax request initiated by a page can only have the same path as the domain name of the current page, which can effectively prevent cross-domain attacks.
Therefore, the cross-domain problem is a limitation for Ajax.
How to solve cross-domain issues?
There are currently three commonly used cross-domain solutions:
-
Jsonp
The earliest solution, the principle of cross-domain can be realized by using script tags.
limit:
- Need service support
- Can only initiate GET requests
-
Nginx reverse proxy
The idea is: use nginx to reverse the cross-domain proxy as non-cross-domain, and support various request methods
Disadvantages: additional configuration is required in nginx, and the semantics are not clear
-
CORS
Standardized cross-domain request solution, safe and reliable.
Advantage:
- Control whether to allow cross-domain on the server side, and customize rules
- Support various request methods
Disadvantages:
- Will generate additional requests
We will use cors' cross-domain solution here.
CORS solves cross-domain
What is Cors?
CORS is a W3C standard, the full name is "Cross-origin resource sharing" (Cross-origin resource sharing).
It allows browsers to send XMLHttpRequestrequests to cross-origin servers , thus overcoming the limitation that AJAX can only be used from the same source .
CORS needs to be supported by both the browser and the server. Currently, all browsers support this function, and IE browser cannot be lower than IE10.
-
Browser side:
Currently, all browsers support this function (not available below IE10). The entire CORS communication process is done automatically by the browser and does not require user involvement.
-
Server:
There is no difference between CORS communication and AJAX, so you don't need to change the previous business logic. It's just that the browser will carry some header information in the request. We need to judge whether it is allowed to cross domains based on this, and then add some information in the response header. This is generally done through a filter.
Origin will indicate which domain the current request belongs to (protocol + domain name + port). The service will decide whether to allow cross-domain based on this value. If the server allows cross-domain, it needs to be carried in the returned response header
Access-Control-Allow-Origin: http://manage.leyou.com
Access-Control-Allow-Credentials: true
Content-Type: text/html; charset=utf-8
- Access-Control-Allow-Origin : Acceptable domain, which can be a specific domain name or
*("*" represents any domain name). - Access-Control-Allow-Credentials : Whether to allow cookies to be carried, by default, core will not carry them unless the value is true
To operate a cookie, three conditions need to be met:
- The response header of the service needs to carry Access-Control-Allow-Credentials and be true.
- The browser initiates ajax and needs to specify withCredentials as true.
- The Access-Control-Allow-Origin in the response header must not be *, it must be the specified domain name.
Special request
The special request will add an HTTP query request before the formal communication, which is called a pre-check request.
The browser first asks the server whether the domain name of the current webpage is in the server's permission list, and which HTTP verbs and header fields can be used. Only when a positive answer is received, the browser will send a formal request, otherwise it will report an error.
Examples:
OPTIONS /cors HTTP/1.1
Origin: http://manage.leyou.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header
Host: api.leyou.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...
In addition to Access-Control-Allow-Origin and Access-Control-Allow-Credentials, there are a few more.
- Access-Control-Allow-Methods : Allow access methods.
- Access-Control-Allow-Headers : Allowed headers
- Access-Control-Max-Age : The valid duration of this license, in seconds. Ajax requests before expiration do not need to be pre-checked again
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
@Configuration
public class HshopCorsConfig {
@Bean
public CorsFilter corsFilter(){
CorsConfiguration configuration = new CorsConfiguration();
configuration.addAllowedOrigin("http://manage.gshop.com");
configuration.setAllowCredentials(true);//检测是否发Cookie
configuration.addAllowedMethod("GET");
configuration.addAllowedMethod("POST");
configuration.addAllowedMethod("DELETE");
configuration.addAllowedMethod("PUT");
configuration.addAllowedHeader("*");
UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
urlBasedCorsConfigurationSource.registerCorsConfiguration("/**",configuration); //2.添加映射路径，我们拦截一切请求
return new CorsFilter(urlBasedCorsConfigurationSource);
}
}
Solve the problem of cross-domain interception