一、为什么会呈现跨域问题

出于浏览器的同源策略限度。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最外围也最根本的平安性能,如果短少了同源策略,则浏览器的失常性能可能都会受到影响。能够说Web是构建在同源策略根底之上的,浏览器只是针对同源策略的一种实现。

同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源(即指在同一个域)就是两个页面具备雷同的协定(protocol),主机(host)和端口号(port)

二、什么是跨域

当一个申请url的协定、域名、端口三者之间任意一个与以后页面url不同即为跨域

三、非同源限度

  1. 无奈读取非同源网页的 Cookie、LocalStorage 和 IndexedDB
  2. 无奈接触非同源网页的 DOM
  3. 无奈向非同源地址发送 AJAX 申请

四、java 后端 实现 CORS 跨域申请的形式

对于 CORS的跨域申请,次要有以下几种形式可供选择:

  1. 返回新的CorsFilter
  2. 重写 WebMvcConfigurer
  3. 应用注解 @CrossOrigin
  4. 手动设置响应头 (HttpServletResponse)
  5. 自定web filter 实现跨域

留神:

  • CorFilter / WebMvConfigurer / @CrossOrigin 须要 SpringMVC 4.2以上版本才反对,对应springBoot 1.3版本以上
  • 上背后两种形式属于全局 CORS 配置,后两种属于部分 CORS配置。如果应用了部分跨域是会笼罩全局跨域的规定,所以能够通过 @CrossOrigin 注解来进行细粒度更高的跨域资源管制
  • 其实无论哪种计划,最终目标都是批改响应头,向响应头中增加浏览器所要求的数据,进而实现跨域

Spring Boot 系列最全教程看这里:https://blog.didispace.com/sp...

1.返回新的 CorsFilter(全局跨域)

在任意配置类,返回一个 新的 CorsFIlter Bean ,并增加映射门路和具体的CORS配置门路。

@Configurationpublic class GlobalCorsConfig {    @Bean    public CorsFilter corsFilter() {        //1\. 增加 CORS配置信息        CorsConfiguration config = new CorsConfiguration();        //放行哪些原始域        config.addAllowedOrigin("*");        //是否发送 Cookie        config.setAllowCredentials(true);        //放行哪些申请形式        config.addAllowedMethod("*");        //放行哪些原始申请头部信息        config.addAllowedHeader("*");        //裸露哪些头部信息        config.addExposedHeader("*");        //2\. 增加映射门路        UrlBasedCorsConfigurationSource corsConfigurationSource = new UrlBasedCorsConfigurationSource();        corsConfigurationSource.registerCorsConfiguration("/**",config);        //3\. 返回新的CorsFilter        return new CorsFilter(corsConfigurationSource);    }}

2. 重写 WebMvcConfigurer(全局跨域)

@Configurationpublic class CorsConfig implements WebMvcConfigurer {    @Override    public void addCorsMappings(CorsRegistry registry) {        registry.addMapping("/**")                //是否发送Cookie                .allowCredentials(true)                //放行哪些原始域                .allowedOrigins("*")                .allowedMethods(new String[]{"GET", "POST", "PUT", "DELETE"})                .allowedHeaders("*")                .exposedHeaders("*");    }}

3. 应用注解 (部分跨域)

在控制器(类上)上应用注解 @CrossOrigin:,示意该类的所有办法容许跨域。

@RestController@CrossOrigin(origins = "*")public class HelloController {    @RequestMapping("/hello")    public String hello() {        return "hello world";    }}

在办法上应用注解 @CrossOrigin:

@RequestMapping("/hello")@CrossOrigin(origins = "*") //@CrossOrigin(value = "http://localhost:8081") //指定具体ip容许跨域public String hello() {    return "hello world";}

4. 手动设置响应头(部分跨域)

应用 HttpServletResponse 对象增加响应头(Access-Control-Allow-Origin)来受权原始域,这里 Origin的值也能够设置为 “*”,示意全副放行。

@RequestMapping("/index")public String index(HttpServletResponse response) {    response.addHeader("Access-Allow-Control-Origin","*");    return "index";}

5. 应用自定义filter实现跨域

首先编写一个过滤器,能够起名字为:MyCorsFilter.java

package com.mesnac.aop;import java.io.IOException;import javax.servlet.Filter;import javax.servlet.FilterChain;import javax.servlet.FilterConfig;import javax.servlet.ServletException;import javax.servlet.ServletRequest;import javax.servlet.ServletResponse;import javax.servlet.http.HttpServletResponse;import org.springframework.stereotype.Component;@Componentpublic class MyCorsFilter implements Filter {  public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {    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,content-type");    chain.doFilter(req, res);  }  public void init(FilterConfig filterConfig) {}  public void destroy() {}}

在web.xml中配置这个过滤器,使其失效

<!-- 跨域拜访 START--><filter> <filter-name>CorsFilter</filter-name> <filter-class>com.mesnac.aop.MyCorsFilter</filter-class></filter><filter-mapping> <filter-name>CorsFilter</filter-name> <url-pattern>/*</url-pattern></filter-mapping><!-- 跨域拜访 END  -->

都学会了吧?倡议珍藏备用!