崛起於Springboot2.X + 全方位解決Cors跨域（49）

時間 2019-11-08

標籤崛起 springboot2.x springboot 全方位解決 cors 欄目 Spring 简体版

原文原文鏈接

《SpringBoot2.X心法總綱》php

1、概念理解Cors

1.一、什麼是Cors？html

直接解釋爲跨域，是一個比jsonp更優秀的存在，JSONP只支持Get請求，CORS支持全部類型的HTTP請求。jquery

1.二、什麼是跨域？web

同源是指，域名、協議、端口均爲相同，若是三者有其一不一樣，都算做跨域，A網站的ajax訪問B網站的接口就是跨域，以下解釋ajax

非跨域： 
      http://www.osc.com/index.html      調用 http://www.osc.com/index.php   非跨域
跨 域：
      http://www.osc.com/index.html      調用 http://www.qq.com/index.php    跨域,主域不一樣 
      http://abc.osc.com/index.html      調用 http://def.osc.com/server.php  跨域,子域名不一樣 
      http://www.osc.com:8080/index.html 調用 http://www.osc.com/server.php  跨域,端口不一樣 
      https://www.osc.com/index.html     調用 http://www.osc.com/server.php  跨域,協議不一樣（https和http的區別）

2、準備A項目

準備2個Springboot項目，不一樣端口號，A項目ajax訪問B項目接口，算是跨域訪問，我會把全部用到的代碼都放到上面，省的你們評論爲啥我這不行...spring

A項目：springboot+freemakerjson

2.一、pom.xml跨域

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-freemarker</artifactId>
</dependency>

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

2.二、application.propertiesspringboot

server.port=8089
server.servlet.context-path=/tssd

#thymeleaf
spring.mvc.view.prefix=classpath:/templates/
spring.mvc.view.suffix=.html
spring.thymeleaf.cache=false
spring.mvc.static-path-pattern=/**
spring.resources.static-locations =classpath:/static/
spring.thymeleaf.mode=LEGACYHTML5

2.三、controllermvc

@Controller
public class EveryController {
    @RequestMapping(value = "/every/{url}")
    public String toEveryUrl(@PathVariable("url") String url){
        return url;
    }
}

2.四、templates文件夾下index.html，如今此ajax訪問的是8082，因此B項目端口號必須是8082

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>xixi</title>
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
    i love you,my beast love girl aoxin
<script>
    $(function() {
        $.ajax({
            url : "http://localhost:8082/test",
            type : "POST",
            dataType: "json",
            success : function(data) {
                alert(data.data);
            },
            error: function () {
                alert("錯誤");
            }
        });
    })
</script>
</body>
</html>

一會咱們就直接經過接口 http://localhost:8089/tssd/every/index 就直接到了index.html，而後頁面加載函數ajax請求B項目接口。

3、B項目建立

3.一、pom.xml

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-web</artifactId>
</dependency>

3.二、application.properties

server.port=8082

3.三、實體類

@Data
@AllArgsConstructor
public class Result {
    private boolean success;
    private String code;
    private String message;
    private Object data;
    public Result() {
        this.success = true;
        this.code = "200";
    }
}

而後其餘的就先不須要配置了，到此爲止，B項目結束。

4、方法一：method局部解決跨域

是針對某一個接口解決跨越問題。

在B項目中，使用註解在方法上，這樣咱們這個方法就能夠被跨域了。

@CrossOrigin(origins = "http://localhost:8089",maxAge = 3600)
@RequestMapping(value = "/test",method = RequestMethod.POST)
@ResponseBody
public Result testOne(){
    Result result = new Result();
    result.setData("fjsd");
    return result;
}

http://localhost:8089/tssd/every/index

5、方法二：局部解決跨域之類

把方法一做用在方法上的註解CrossOrigin做用到類上，這樣，該類的全部方法均可以被跨域。

@Controller
@CrossOrigin(origins = "http://localhost:8089",maxAge = 3600)
public class FirstController {

    @RequestMapping(value = "/test",method = RequestMethod.POST)
    @ResponseBody
    public Result testOne(){
        Result result = new Result();
        result.setData("fjsd");
       return result;
    }
}

成功截圖和上面是同樣的，可是實現方式是不同的。固然，若是你的註解只寫成

@CrossOrigin(maxAge = 3600)

那麼它是能夠容許任何網站均可以訪問的，已經測試了，你們能夠把origins去掉就能夠了origins

6、方法三：全局配置解決跨域

把方法1、方法二的註解去掉，添加全局配置，配置能夠跨域的接口路徑等等。

@Configuration
public class MyCrosConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/test")
                .allowedOrigins("http://localhost:8089")
                .allowedMethods("PUT", "DELETE","POST","GET")
                .allowedHeaders("*")
                .maxAge(3600);
    }
}

7、方法四：過濾器解決跨域

能夠把以前的三個方法的註解或者@Configuration都去掉，接下里咱們用第四種方法測試。

@Configuration
public class CrosFilter {
    @Bean
    CorsFilter getCorsFilter(){
        CorsConfiguration cors = new CorsConfiguration();
        cors.setAllowCredentials(true);
        cors.addAllowedMethod("*");
        cors.addAllowedOrigin("*");
        cors.setMaxAge(3600L);
        cors.addAllowedHeader("*");
        cors.applyPermitDefaultValues();

        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**",cors);

        CorsFilter corsFilter = new CorsFilter(source);
        return corsFilter;
    }
}

結果：成功。