在 SpringBoot 中设置允许跨域请求
一、前言
现在在团队做的项目都是前后端分离的，借助 swagger 进行前后端合作 ① 后台负责写数据处理的接口 ② 前台负责解析 JSON、设计界面
要实现接口可以给前端访问，还要设置允许跨域访问接口，正式本文的重点
前后端分离优缺点： 一、为什么要前后端分离： 1.后台接口可以 pc、app、pad 多端适应 2.前端 SPA 开发模式开始流行 3.前后端开发职责不清（如 JSP/thymeleaf/freemarker/Django 模板引擎渲染数据，到底是谁的工作？） 4.前后端互相等待，不能同时进行开发 5.前端一直配合着后端，能力受限 6.后台开发语言和模板高度耦合 二、前后端分离缺点 1.前后端学习门槛增加 2.数据依赖导致文档重要性增加 3.前端工作量加大 4.SEO 的难度加大（ajax大量使用）
由于浏览器的安全性限制，不允许AJAX访问 协议不同、域名不同、端口号不同的 数据接口， 浏览器认为这种访问不安全
二、代码
package com.zcw.conf;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
/**
* 实现基本的跨域请求
* @author linhongcun
*
*/
@Configuration
public class CorsConfig {
private CorsConfiguration buildConfig() {
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.addAllowedOrigin("*"); // 允许任何域名使用
corsConfiguration.addAllowedHeader("*"); // 允许任何头
corsConfiguration.addAllowedMethod("*"); // 允许任何方法（post、get等）
return corsConfiguration;
}
@Bean
public CorsFilter corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", buildConfig()); // 对接口配置跨域设置
return new CorsFilter(source);
}
}
三、其他
以上的代码基本是常识了，记录一下， Ajax 请求示例：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script src="js/jquery-1.7.2.js"></script>
<script type="text/javascript">
function upd() {
$.ajax({
type: "get",
data: "a=1",
url: "http://120.79.197.131:8080/user/getAllUser",
success: function(result) {
console.log(result);
}
});
}
</script>
<body>
<!--获取-->
<button id="btn2" onclick="upd()">Get request 获取</button>
</body>
</html>
