实现跨域的三种方式

　　1、CorsFilter 　　　　过滤器

　　2、<mvc:cors>　　　　Bean 　　在srping-web中配置

　　3、@CorssOrigin　　　注解

CorsFilter的实现

 1 package com.wgc.jsonp.filter;
 2 
 3 import org.springframework.web.cors.CorsConfiguration;
 4 import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
 5 import org.springframework.web.filter.CorsFilter;
 6 
 7 import javax.servlet.annotation.WebFilter;
 8 import java.util.Arrays;
 9 import java.util.Collections;
10 //  视为一个过滤器配置可以在web.xml配置，也可以直接使用注解
11 @WebFilter("/*")
12 public class MyCorsFilter extends CorsFilter {
13     public MyCorsFilter() {
14         super(configurationSource());
15     }
16 
17     private static UrlBasedCorsConfigurationSource configurationSource() {
18 
19         UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
20         CorsConfiguration configuration = new CorsConfiguration();
21 //        设置允许访问的网络
22         configuration.setAllowedOrigins(Collections.singletonList("http://192.168.1.133:8081"));
23 //        设置允许访问的方法
24         configuration.setAllowedMethods(Arrays.asList(new String[]{"GET", "POST"}));
25 //        设置头部信息Access-Control-Allow-Origin是必须写的
26         configuration.setAllowedHeaders(Collections.singletonList("Access-Control-Allow-Origin"));
27 //        设置是否从服务器获取cookie
28         configuration.setAllowCredentials(true);
29 //        设置准备响应前缓存持续的最大时间
30         configuration.setMaxAge(Long.valueOf(3600));
31 //        注册configuration是那个方法或类上访问的
32         source.registerCorsConfiguration("/mvc", configuration);
33 //        可以创建多个Configuration
34         return source;
35     }
36 
37 }

<mvc:cors> 的实现:

 1 <mvc:cors>
 2        <!-- service方法是应用-->
 3        <mvc:mapping path="/mvc"
 4                     allowed-origins="http://192.168.1.133:8081"
 5                     allowed-methods="GET,POST"
 6                     allowed-headers="Access-Control-Allow-Origin"
 7                     allow-credentials="true"/>
 8        <!-- service类上应用-->
 9         <mvc:mapping path="/mvc/**"
10                      allowed-origins="http://192.168.1.133:8081, http://domain2.com"
11                      allowed-methods="GET,POST"
12                      allowed-headers="Access-Control-Allow-Origin"
13                      exposed-headers="header1, header2"
14                      allow-credentials="true"
15                      max-age="123"   />
16   </mvc:cors>

@CorssOrigin的实现：

package com.wgc.jsonp.controller;

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.RestController;

import javax.servlet.http.HttpServletResponse;

@RestController
/*
*   将跨域设置在类上，那么所有的 mapping 都会使用这个策略
*   如果不加参数，那么将会使用配置中的默认参数
* */
/* @CrossOrigin */
public class JSONPController {
    @RequestMapping("/cors")
    public String demo(HttpServletResponse response, String callback) {
        return callback + "('sdfdsf')";
    }

    @RequestMapping("/jsonpdata")
    public String demo1(HttpServletResponse response) {
        response.setHeader("Access-Control-Allow-Origin", "http://192.168.1.178:8081");
        return "susses";
    }

    @RequestMapping("/mvc")
    /*
    * origins：能访问的网络ip
    * methods：允许什么方法可以访问
    * allowedHeaders：头部信息，这里一定要写上Access-Control-Allow-Origin
    * 如果还有其他头部信息可以使用逗号隔开； 如： {"Content-Type", "Access-Control-Allow-Origin"}
    * allowCredentials：cookie是否返回到服务器,true是返回
    *maxAge：准备响应前缓存持续的最大时间
    * */
    @CrossOrigin(origins = {"http://192.168.1.133:8081", "http://domain2.com"},
                methods = {RequestMethod.GET, RequestMethod.POST},
                allowedHeaders = {"Access-Control-Allow-Origin"},
                allowCredentials = "true",
                maxAge = 123445)
    public String demo2() {
        return  "hello, word";
    }

}

前台代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>跨域</title>
    </head>
    <body>
        <script src="axios.js">
            
        </script>
        <!-- <button onclick="send()">java-web跨域发送</button> -->
        <button onclick="send_mvc()">mvc 跨域</button>
        <script src="axios.js"></script>
        <script>
            function send() {
                axios({
                    method: 'get',
                    url: 'http://localhost:8080/test'
                }).then(res => console.log(res));
            }
            function send_mvc() {
                axios({
                    method: 'get',
                    url: 'http://localhost:8080/mvc'
                }).then(res => console.log(res.data));
            }
        </script>
    </body>
</html>

实现跨域的三种方式

猜你喜欢