Spring Boot：处理跨域问题

原创

HLee

修改于 2021-07-30 14:30:08

1.8K0

修改于 2021-07-30 14:30:08

文章被收录于专栏：房东的猫房东的猫

简介

同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

同源策略，它是由Netscape提出的一个著名的安全策略。现在所有支持JavaScript 的浏览器都会使用这个策略。所谓同源是指，协议、域名、端口相同。当一个浏览器的两个tab页中分别打开来百度和谷歌的页面当浏览器的百度tab页执行一个脚本的时候会检查这个脚本是属于哪个页面的，即检查是否同源，只有和百度同源的脚本才会被执行。如果非同源，那么在请求数据时，浏览器会在控制台中报一个异常，提示拒绝访问。

跨域（CORS）是指不同域名之间相互访问。跨域，指的是浏览器不能执行其他网站的脚本，它是由浏览器的同源策略所造成的，是浏览器对于JavaScript所定义的安全限制策略。

同一协议，如http或https
同一IP地址, 如127.0.0.1
同一端口, 如8080

以上三个条件中有一个条件不同就会产生跨域问题。

前端解决方案

使用JSONP方式实现跨域调用；
使用NodeJS服务器做为服务代理，前端发起请求到NodeJS服务器， NodeJS服务器代理转发请求到后端服务器；

后端解决方案

Nginx反向代理解决跨域
服务端设置Response Header(响应头部)的Access-Control-Allow-Origin
在需要跨域访问的类和方法中设置允许跨域访问（如Spring中使用@CrossOrigin注解）；
继承使用Spring Web的CorsFilter（适用于Spring MVC、Spring Boot）
实现WebMvcConfigurer接口（适用于Spring Boot）

实现跨域

使用Filter方式进行设置

使用Filter过滤器来过滤服务请求，向请求端设置Response Header(响应头部)的Access-Control-Allow-Origin属性声明允许跨域访问。

@WebFilter
public class CorsFilter implements Filter {  

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {  
        HttpServletResponse response = (HttpServletResponse) res;  
        response.setHeader("Access-Control-Allow-Origin", "*");  
        response.setHeader("Access-Control-Allow-Methods", "*");  
        response.setHeader("Access-Control-Max-Age", "3600");  
        response.setHeader("Access-Control-Allow-Headers", "*");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        chain.doFilter(req, res);  
    }  
}

继承 HandlerInterceptorAdapter

@Component
public class CrossInterceptor extends HandlerInterceptorAdapter {

    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "*");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        return true;
    }
}

实现WebMvcConfigurer

@Configuration
public class CrossDomainConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {

        registry.addMapping("/**") // 拦截所有的请求
                .allowedOrigins("*") // 可跨域的域名，可以为 *
                .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS") // 允许跨域的方法，可以单独配置
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*"); // 允许跨域的请求头，可以单独配置
    }
}

Ajax跨域访问增加响应头

浏览器通过访问8080的A服务的静态Html页面，A服务中有一段ajax请求了8081的B服务，这个时候会出现跨域问题。

/**
 * 添加响应头解决跨域
 * @return
 */
@RequestMapping(value = "/user-1")
public User getUser_1(HttpServletResponse response ) {

    // 允许所有，不安全
    response.addHeader("Access-Control-Allow-Origin", "*");
    response.addHeader("Access-Control-Max-Age", "10");
    response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT");
    response.setHeader("Access-Control-Allow-Credentials", "true");

    return new User(1L, "Booker", "admin", "sdfsdkjf93hu8dvn");
}

/**
 * 如果只是想部分接口跨域，且不想使用配置来管理的话，可以使用这种方式
 * 添加响应头解决跨域
 * @return
 */
@RequestMapping(value = "/user_2", method = RequestMethod.POST)
@CrossOrigin(origins = "http://172.16.71.27:8080", maxAge = 3600)
public User getUser_2(@RequestParam Long id) {
    return new User(id, "Booker", "admin", "sdfsdkjf93hu8dvn");
}

注意：可以在Controller的类上和方法上都可以使用
1.一定要在某类 或者某方法上 添加类似 method = RequestMethod.POST 的属性 
    eg： @RequestMapping(value = "/api", method = RequestMethod.POST)
2.在某个方法上添加@CrossOrigin 注解时 origins 属性一定要写ip号 如果输入localhost有时会出现403错误
    eg：@CrossOrigin(origins = "http://172.16.71.27:8080")

ajax跨域访问增加响应头

$.ajax({
    url: "http://xxxx.xxxx.com/api/user/user-1",
    type: "post",
    dataType: "text",
    contentType: "application/json",
    data: JSON.stringify(data),
    headers: {'Content-Type': 'application/json'},
    success: function (res) {
        alert(res);
    }
})

手写Java反向代理解决跨域

浏览器通过访问8080的A服务的静态页面，A服务中通过代理的方式访问8081的B服务。

@SpringBootApplication
public class SpringMasterApplication {

	public static void main(String[] args) {
		SpringApplication.run(SpringMasterApplication.class, args);
	}


	@Resource
	private RestTemplateBuilder restTemplateBuilder;

	/**
	 * 注入RestTemplate
	 * @return
	 */
	@Bean
	public RestTemplate restTemplate() {
		return restTemplateBuilder.build();
	}
}

配置文件

proxy-address = http://127.0.0.1:8081

Controller

package com.spring.master.跨域.controller;


import org.springframework.beans.factory.annotation.Value;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.client.RestTemplate;

import javax.annotation.Resource;
import javax.servlet.http.HttpServletRequest;

/**
 * @author 
 * @version 1.0
 */
@RestController
@RequestMapping(value = "proxy")
public class ProxyController {

    @Value("${proxy-address}")
    private String proxyAddress;

    @Resource
    private RestTemplate restTemplate;

    /**
     * 代理请求
     * @param request
     * @return
     */
    @RequestMapping(value = "/api/**")
    @ResponseBody
    public Object proxy(HttpServletRequest request) {
        return restTemplate.getForObject(proxyAddress + request.getRequestURI().replace("/api", ""), Object.class);
    }
}

Spring Cloud Gateway跨域配置

Nginx解决跨域

Vue解决跨域

Jsonp解决跨域

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

spring boot

原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。

如有侵权，请联系 cloudcommunity@tencent.com 删除。

spring boot

登录后参与评论

0 条评论

热度