跨域指浏览不能执行其他网站的脚本,由浏览器同源策略造成的。如果不解决跨域问题会导致无法向同源地址发送Ajax请求、Cookie、缓存等。

什么时候会出现跨域?

当一个请求url的协议域名端口三者之间任意一个与当前页面url不同,即为跨域。

当前页面 被请求页面 是否跨域
http://xffjs.com http://xffjs.com/xxx
http://xffjs.com https://xffjs.com
http://xffjs.com http://a.xffjs.com
http://xffjs.com http://xffjs.com:8080

跨域解决方式

通过Nginx配置解决

# ******解决跨域问题******
add_header Access-Control-Allow-Origin *;
add_header Access-Control-Allow-Credentials 'true';
add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE;
add_header Access-Control-Allow-Headers *;

通过代码解决

跨域测试:

// 找一个网页打开控制台,输入以下代码即可
var xhr = new XMLHttpRequest();
xhr.open('GET', '自己的url');
xhr.send(null);
xhr.onload = function(e) {
    var xhr = e.target;
    console.log(xhr.responseText);
}

1、使用@CrossOrigin注解

/**
 * 接口测试
 */
@CrossOrigin
@GetMapping("/test")
@ResponseBody
public ApiResult test() {
    return ApiResult.success("请求成功!");
}

没加注解之前:

加上注解之后:

@CrossOrigin可以作用于方法和类上面。

2、全局跨域配置:

@Configuration
public class ResourcesConfig implements WebMvcConfigurer {

    /**
     * web跨域访问配置
     *
     * @param registry
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        // 设置允许跨域的路径
        registry.addMapping("/**")
                // 设置允许跨域请求的域名
                .allowedOrigins("*")
                // 是否允许证书
                .allowCredentials(true)
                // 设置允许的方法
                .allowedMethods("GET", "POST", "DELETE", "PUT")
                // 设置允许的header属性
                .allowedHeaders("*")
                // 跨域允许时间 单位秒
                .maxAge(3600);
    }
}