SpringBoot解决ajax跨域问题

最新推荐文章于 2024-05-05 17:15:41 发布

南城老猫

最新推荐文章于 2024-05-05 17:15:41 发布

阅读量1.7k

点赞数

分类专栏： springboot 文章标签： ajax springboot java 请求跨域

本文链接：https://blog.csdn.net/xu12387/article/details/88869749

版权

springboot 专栏收录该内容

20 篇文章 1 订阅

订阅专栏

场景：

编写普通普通接口程序

@RestController
public class TestController {
    @GetMapping("/index")
    public String index(String name) {
        return name;
    }

}

ajax请求：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>
	<body>
		<button id="btn">ajax请求跨域</button>
	</body>
	<script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
	<script>
		$(document).ready(function() {
			$("#btn").click(function() {
				$.ajax({
					type: "GET",
					url: "http://127.0.0.1:8080/index?name=zhangsan",
					dataType: "json",
					success: function(data) {
						console.log(data)
					},
					error: function(data) {
						console.log("error: " + data.status);
					}
				});
			});
		});
	</script>

</html>

点击按钮提交ajax请求：

这个就是我们后端没设置跨域处理导致的错误。接下来我们看看怎么解决！

方法一：

通过继承WebMvcConfigurerAdapter 类来实现。

@Configuration
public class CorsConfig extends WebMvcConfigurerAdapter {
    static final String ORIGINS[] = new String[] { "GET", "POST", "PUT", "DELETE" };
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**").allowedOrigins("*").allowCredentials(true).allowedMethods(ORIGINS)
                .maxAge(3600);
    }
}

但是如果你的springboot2.0以上本版你会发现这个类已过时，不过不会影响使用！

springboot2.0以后我们可以通过实现WebMvcConfigurer这个类来解决跨域

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    static final String ORIGINS[] = new String[] { "GET", "POST", "PUT", "DELETE" };
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**").allowedOrigins("*").allowCredentials(true).allowedMethods(ORIGINS)
                .maxAge(3600);
    }
}

注：这种解决跨域会存在问题。当服务器抛出 500 的时候依旧存在跨域问题！

方法二（推荐）：

@Configuration
public class CorsConfig {
    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*");
        corsConfiguration.addAllowedHeader("*");
        corsConfiguration.addAllowedMethod("*");
        return corsConfiguration;
    }

    /**
     * 跨域过滤器
     * @return
     */
    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig());
        return new CorsFilter(source);
    }
}

注：allowedOrigins：允许所有的请求域名访问我们的跨域资源，可以固定单条或者多条内容。
allowedHeaders：允许所有的请求header访问，可以自定义设置任意请求头信息，如："X-YAUTH-TOKEN"
allowedMethods：允许所有的请求方法访问该跨域资源服务器，如：POST、GET、PUT、DELETE等。

方法三：

通过配置过滤器实现跨域

@Component
public class CorsFilter implements Filter {

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @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", "POST, GET, OPTIONS, DELETE,PUT");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "x-requested-with");
        chain.doFilter(req, res);
    }

    @Override
    public void destroy() {
        // TODO Auto-generated method stub

    }

}

nginx跨域处理：

在代理路径设置的 location/ 下加入配置文件：proxy_pass http://localhost:8080;是你的路径哦！别搞错了

location / {
    proxy_pass http://localhost:8080;
    if ($request_method = 'OPTIONS') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Token';
        add_header 'Access-Control-Max-Age' 1728000;
        add_header 'Content-Type' 'text/plain; charset=utf-8';
        add_header 'Content-Length' 0;
        return 204;
    }
    if ($request_method = 'POST') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Token';
        add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Token';
    }
    if ($request_method = 'GET') {
        add_header 'Access-Control-Allow-Origin' '*';
        add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
        add_header 'Access-Control-Allow-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Token';
        add_header 'Access-Control-Expose-Headers' 'DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Content-Range,Range,Token';
    }
}

更多springboot实战文章，请访问：https://blog.csdn.net/xu12387/column/info/35906

南城老猫

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
SpringBoot解决ajax跨域问题

场景：编写普通普通接口程序@RestControllerpublic class TestController { @GetMapping("/index") public String index(String name) { return name; }} ajax请求：<!DOCTYPE html&gt...
复制链接

扫一扫