如何实现跨域请求

首先我们来理解一下什么是跨域，和出现跨域的根本原因是什么！

简单的来说跨域就是两个不同源的页面。

而之所以出现跨域问题的根本原因就是浏览器的同源策略不允许非同源的URL之间进行资源的相互访问。

而我们要如何区解决这个问题呢？

如今我们，我们有两种方法去解决这个问题，1.通过JSONP 2.通过CORS

先来说JSONP，JSONP就是利用<script>标签不受浏览器的同源策略的影响，可以通过src属性来请求非同源的js脚本，但它只是一个临时解决的方法。且只支持GET请求

  <script>
        function success(data){
            console.log("请求回来的数据:");
            console.log(data);
        }
      
    </script>
    <script src="http://localhost:8082/jsonp?callback=success" ></script>

通过设置src属性来访问服务端，这里callback就是在服务端调用success方法来返回数据

这个很多人会有迷惑服务端是如何知道要返回callback的，我们传给后端一个callback后，后端会接受到callback，然后生成一个callback的函数将这个函数返回给调用。

@RestController
@RequestMapping("/jsonp")
public class jsonp {
    @ResponseBody
    @GetMapping
    public String json(@RequestParam(value = "callback",required = false)String callback, HttpServletResponse response){
//        response.setHeader("Access-Control-Allow-Origin","*");
        String str ="{hello:hello}";
        return callback+"("+str+")";

    }
}

我们同时可以使用jQuery的方式去实现JSONP

<script>
            $.ajax({
                url: "http://localhost:8082/jsonp",
                type:"get",
                dataType: "jsonp",
                success: function(res){
                    console.log("返回来的数据时：");
                    console.log(res);
                }
            
            })       
             </script>

其实ajax实现JSONP的过程也许是通过script标签。

在我们发起JSONP请求时，会动态的想<header>中append一个<script>标签

在JSONP请求成功后，会动态的从<header>中移除刚才append进去的<script>标签

下面我们来看看CORS如何实现

CORS从根本上解决了跨域问题,支持get post请求

第一种直接使用@CrossOrigin注解

@RestController
@RequestMapping("/cors")
public class cors {
    @GetMapping
    @CrossOrigin
    public String cor(){

        String str ="{hello:hello}";
        return str;

    }
}

第二种使用配置文件的方式

@Configuration
public class CorsConfig {

    @Bean
    public CorsFilter corsFilter(){
        CorsConfiguration corsConfiguration=new CorsConfiguration();
        //允许跨域的主机地址,*表示所有都可以
        corsConfiguration.addAllowedOrigin("*");
        //允许跨域的请求头
        corsConfiguration.addAllowedHeader("*");
        //允许跨域的请求方法
        corsConfiguration.addAllowedMethod("*");
        UrlBasedCorsConfigurationSource source=new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**",corsConfiguration);
        return new CorsFilter(source);
    }
}

使用cors我们就不用通过scprit标签这种形式去访问了

直接正常访问都可以了

 <script>
        $.ajax({
            type:"GET",
            url:"http://localhost:8082/cors",
        
            success: function(res){
                console.log(res);
            }

        })
    </script>

如果想深入了解Cors可以多多查阅资料，我这里只是给你一个思路。欢迎私信进行交流!