CORS常用解决跨域的方法

发布时间 2023-07-19 09:14:25作者: ASKANDANSWERS

浏览器先询问服务器,当前网页所在的域名是否在服务器的许可名单之中,以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复,浏览器才会发出正式的XMLHttpRequest请求,否则就报错

 

前端发送Ajax请求

$("#test").click(function(){
    $.ajax({
        url : "http://localhost:8084/show.cors",
        type : "GET",
        success : function(result){
            // alert(result);
            console.log(result)
        }
    })
})

 

后端接收方式一

HttpServletResponse添加头信息

@RestController
public class CorsController {
​
    @RequestMapping(value = "/look.cors")
    public String look(HttpServletResponse response){
        response.addHeader("Access-Control-Allow-Origin","http://localhost:8083");
        //response.addHeader("Access-Control-Allow-Credentials","true");
        return "hello cors";
    }
}

 

后端接收方式二

使用Spring注解@CrossOrigin

@RestController
public class CorsController2 {
​
    @RequestMapping(value = "/show.cors")
    @CrossOrigin(origins = "http://localhost:8083")
    /* @CrossOrigin    也可配置在类上
     * 属性:
     * methods     表明服务器支持的跨域请求的方法
     * maxAge      预检的有效期
     */
    public String show(){
        return "hello cors";
    }
}

 

后端接收方式二

通过配置类解决跨域
使用HttpServletResponse对象或注解方式,需要在每个需要跨域的方法上都加上相应的注解或参数,我们想让所有的controller都添加跨域功能,我们可以通过实现WebMvcConfigurer接口来自定义跨域配置
WebMvcConfigurer是一个接口,提供很多自定义的拦截器,例如跨域设置、类型转化器等springMVC的配置

@Configuration
public class CorsConfig implements WebMvcConfigurer {
​
    /**
     * addMapping:配置可以被跨域的路径,可以任意配置,可以具体到直接请求路径。
     * allowedMethods:允许所有的请求方法访问该跨域资源服务器,如:POST、GET、PUT、DELETE等。
     * allowedOrigins :允许所有的请求域名访问我们的跨域资源,可以固定单条或者多条内容,如:”[http://www.aaa.com](http://www.aaa.com/)“,只有该域名可以访问我们的跨域资源。
     * allowedHeaders:允许所有的请求header访问,可以自定义设置任意请求头信息。
     * @param registry
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/*.cors")
                .allowedOrigins("http://localhost:8083")
                .allowedMethods("POST","GET")
                .maxAge(1000);
    }
}

 

转载:https://blog.csdn.net/m0_59508658/article/details/119795644