域：协议 + 域名 + 端口；三者完全相同则为同域，反之有其一不同均为不同域。
跨域请求：当前【发起请求】的域和【请求指向】的域属于不同域时，该次请求称之为跨域请求。
同源限制：浏览器针对跨域请求做出同源限制资源访问，Cookie、LocalStorage 和 IndexDB 无法跨域访问；
DOM元素无法跨域访问；Ajax无法跨域请求。
跨域请求，是浏览器拦截请求了吗？
域名和端口不同时的跨域，并非浏览器拦截发起请求，实际请求可以正常到达指向的资源，也可以正常返回，只是浏览器拦截了返回内容。
协议不同时，例如https发起Ajax跨域请求到http，则部分浏览器（Chrome，Firefox）会直接拦截请求，请求无法到达指向的资源。（待验证html中的标签 资源地址属性是否生效）
栗子图
- 发起请求的域是http://localhost:8080
- 请求指向的域是http://localhost:8899
此请求就是跨域请求。
未解决的跨域请求
可以看出后台数据已经入库，只是浏览器拦截了返回结果，并不影响后台接口的访问。
解决方案：@CrossOrigin注解
@CrossOrigin注解，作用域可以是方法级别，也可以是类级别，若发生覆盖，已作用域高的为准。
| 属性 | 说明 |
|---|---|
| origins | 允许的来源列表. 他的值放置在HTTP协议的响应header的Access-Control-Allow-Origin .– * – 意味着所有的源都是被允许的。– 如果未定义，则允许所有来源。 |
| allowedHeaders | 实际请求期间可以使用的请求标头列表. 值用于预检的响应header Access-Control-Allow-Headers。– * – 意味着允许客户端请求的所有头文件。– 如果未定义，则允许所有请求的headers。 |
| methods | 支持的HTTP请求方法列表。 如果未定义，则使用由RequestMapping注释定义的方法。 |
| exposedHeaders | 浏览器允许客户端访问的响应头列表。 在实际响应报头Access-Control-Expose-Headers中设置值。– 如果未定义，则使用空的暴露标题列表。 |
| allowCredentials | 它确定浏览器是否应该包含与请求相关的任何cookie。– false – cookies 不应该包括在内。– "" (空字符串) – 意味着未定义.– true – 预响应将包括值设置为true的报头Access-Control-Allow-Credentials。– 如果未定义，则允许所有凭据。 |
| maxAge | 预响应的高速缓存持续时间的最大时间（以秒为单位）。 值在标题Access-Control-Max-Age中设置。– 如果未定义, 最大时间设置为1800秒（30分钟）. |
我们在方法级别上只需要加上
@CrossOrigin(origin="*")再次跨域请求即可正常访问：
解决方案：全局配置CorsConfig
package com.spring.jpa.controller;
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 CorsConfig {
@Bean
public CorsConfiguration corsConfiguration() {
CorsConfiguration corsConfiguration = new CorsConfiguration();
//实际请求中允许携带的首部字段
corsConfiguration.addAllowedHeader("*");
//允许那些域跨域访问
corsConfiguration.addAllowedOrigin("*");
//允许那些请求方法
corsConfiguration.addAllowedMethod("*");
return corsConfiguration;
}
@Bean
public CorsFilter corsFilter(CorsConfiguration corsConfiguration) {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", corsConfiguration); // 4
return new CorsFilter(source);
}
}
解决方案：自定义Filter
import javax.servlet.*;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
@Component
public class CorsFilter implements Filter {
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
//为response填充头部信息，实现跨域正常返回
HttpServletResponse response = (HttpServletResponse) res;
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
chain.doFilter(req, res);
}
public void init(FilterConfig filterConfig) {}
public void destroy() {}
}
解决方案：SpringMVC框架自带配置类
@Configuration
@EnableWebMvc
public class CorsConfiguration extends WebMvcConfigurerAdapter
{
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedMethods("GET", "POST");
}
}
//或者
@Configuration
public class CorsConfiguration
{
@Bean
public WebMvcConfigurer corsConfigurer()
{
return new WebMvcConfigurerAdapter() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**");
}
};
}
}
解决方案：SpringSecurity
@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
@Override
protected void configure(HttpSecurity http) throws Exception {
http.cors().and()
//other config
}
@Bean
CorsConfigurationSource corsConfigurationSource()
{
CorsConfiguration configuration = new CorsConfiguration();
configuration.setAllowedOrigins(Arrays.asList("https://example.com"));
configuration.setAllowedMethods(Arrays.asList("GET","POST"));
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", configuration);
return source;
}
}
方案都大同小异，可以自行测试，选择适合自己得就好。附上Http协议 Header得简要解析：
-
Access-Control-Allow-Origin
响应首部中可以携带这个头部表示服务器允许哪些域可以访问该资源，其语法如下：
Access-Control-Allow-Origin: <origin> | *其中，origin 参数的值指定了允许访问该资源的外域 URI。对于不需要携带身份凭证的请求，服务器可以指定该字段的值为通配符，表示允许来自所有域的请求。
-
Access-Control-Allow-Methods
该首部字段用于预检请求的响应，指明实际请求所允许使用的HTTP方法。其语法如下：
Access-Control-Allow-Methods: <method>[, <method>]* -
Access-Control-Allow-Headers
该首部字段用于预检请求的响应。指明了实际请求中允许携带的首部字段。其语法如下：
Access-Control-Allow-Headers: <field-name>[, <field-name>]* -
Access-Control-Max-Age
该首部字段用于预检请求的响应，指定了预检请求能够被缓存多久，其语法如下：
Access-Control-Max-Age: <delta-seconds> -
Access-Control-Allow-Credentials
该字段可选。它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。设为
true，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。其语法如下：Access-Control-Allow-Credentials: true另外，如果要把 Cookie 发送到服务器，除了服务端要带上
Access-Control-Allow-Credentials首部字段外，另一方面请求中也要带上withCredentials属性。但是需要注意的是：如果需要在 Ajax 中设置和获取 Cookie，那么
Access-Control-Allow-Origin首部字段不能设置为*，必须设置为具体的 origin 源站。详细可阅读文章CORS 跨域 Cookie 的设置与获取 -
Origin
该首部字段表明预检请求或实际请求的源站。不管是否为跨域请求，Origin字段总是被发送。其语法如下：
Origin: <origin> -
Access-Control-Request-Method
该首部字段用于预检请求。其作用是，将实际请求所使用的 HTTP 方法告诉服务器。其语法如下：
Access-Control-Request-Method: <method> -
Access-Control-Request-Headers
该首部字段用于预检请求。其作用是，将实际请求所携带的首部字段告诉服务器。其语法如下：
Access-Control-Request-Headers: <field-name>[, <field-name>]*
