问题描述

前端调用后端提供的 API 来获取数据，很多都是前后端分离的架构

前端调用的后端接口不属于同一个域（域名或端口不同），就会产生跨域问题，也就是说你的应用访问了该应用域名或端口之外的域名或端口。

跨域是指跨域名的访问，以下情况都属于跨域：

跨域原因说明 示例
域名不同 www.jd.com 与 www.taobao.com
域名相同，端口不同 www.jd.com:8080 与 www.jd.com:8081
二级域名不同 item.jd.com 与 miaosha.jd.com

为什么有跨域问题？

跨域不一定会有跨域问题。因为跨域问题是浏览器对于ajax请求的一种安全限制：一个页面发起的ajax请求，只能是于当前页同域名的路径，这能有效的阻止跨站攻击。

因此：跨域问题 是针对ajax的一种限制，也是浏览防止攻击的一种方式。

但是这却给我们的开发带来了不变，而且在实际生成环境中，肯定会有很多台服务器之间交互，地址和端口都可能不同，怎么办

后端的解决办法

细粒度的解决

/*
origins： 允许可访问的域列表
maxAge:准备响应前的缓存持续的最大时间（以秒为单位）。
放在controller或者方法上，也可以两个同时放并且设置不同的注解值
*/


//@CrossOrigin(origins = "http://domain2.com",maxAge = 69)//解决跨域-为整个controller
@RestController
public class HelloController {

    @CrossOrigin(origins = "http://domain2.com",maxAge = 69)//解决跨域
    @RequestMapping("/hello")
    public String Hello(){
        return "Hello!";
    }
}

全局配置

CorsFilter

package com.config;


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 {

    public CorsFilter corsFilter(){
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*");//允许哪些域
        corsConfiguration.addAllowedHeader("*");//允许哪些请求字段
        corsConfiguration.addAllowedMethod("*");//允许哪些请求方法
        UrlBasedCorsConfigurationSource source=new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**",corsConfiguration);

        return new CorsFilter(source);
    }
}

WebMvcConfigurer

package com.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;


@Configuration
public class Webmvc implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOriginPatterns("*")
                .allowedHeaders("*")
                .allowedMethods("GET","POST","PUT")
                .allowCredentials(true)//是否允许携带cookie
                .maxAge(60);//多少秒内浏览器可以不询问
    }
}