前后端解决跨域问题

一、 axios实现ajax

跨域问题：ajax请求不同源---ip地址、端口、项目路径（三者不同源，不允许处理ajax请求）

解决办法：response设置安全的响应头

public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {

    response.setCharacterEncoding("utf-8");
    response.setContentType("text/json;charset=utf-8");
    /** 设置响应头允许ajax跨域访问 **/
    HttpServletResponse rp=(HttpServletResponse)response;
    HttpServletRequest req=(HttpServletRequest) request;
rp.setCharacterEncoding("utf-8");
    rp.setContentType("text/json;charset=utf-8");
    req.setCharacterEncoding("utf-8");
    String origin="*";
    if(req.getHeader("Origin")!=null){
    origin=req.getHeader("Origin");
    }
    rp.setHeader("Access-Control-Allow-Origin", origin);
rp.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE");
rp.setHeader("Access-Control-Max-Age", "3600");
rp.setHeader("Access-Control-Allow-Headers", "x-requested-with, Content-Type, token");
rp.setHeader("Access-Control-Allow-Credentials", "true");
chain.doFilter(request, rp);

}

springboot解决办法：

方案一：实现跨域过滤器（在主方法里写）

@Bean
    public CorsFilter corsFilter() {
        final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        final CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(true); // 允许cookies跨域
        config.addAllowedOrigin("*");// 允许向该服务器提交请求的URI，*表示全部允许。。这里尽量限制来源域，比如http://xxxx:8080 ,以降低安全风险。。
        config.addAllowedHeader("*");// 允许访问的头信息,*表示全部
        config.setMaxAge(18000L);// 预检请求的缓存时间（秒），即在这个时间段里，对于相同的跨域请求不会再预检了
        config.addAllowedMethod("*");// 允许提交请求的方法，*表示全部允许，也可以单独设置GET、PUT等
//        config.addAllowedMethod("HEAD");
//        config.addAllowedMethod("GET");// 允许Get的请求方法
//        config.addAllowedMethod("PUT");
//        config.addAllowedMethod("POST");
//        config.addAllowedMethod("DELETE");
//        config.addAllowedMethod("PATCH");
        source.registerCorsConfiguration("/**", config);
        System.out.println("----------跨域处理------------");
        return new CorsFilter(source);
    }

方案一：实现跨域拦截器---在com.sxl下创建此类

@Configuration
public class CrossInterceptor implements WebMvcConfigurer {
    //允许跨域请求
    public void addCorsMappings(CorsRegistry registry) {
        System.out.println("......跨域执行......");
        registry.addMapping("/**")
                .allowedHeaders("*")
                .allowedOrigins("*")
                .allowedMethods("GET","POST","PUT","OPTIONS")
                .allowCredentials(true)
                .maxAge(5000);
    }
}

二、axios多种参数传递方式

1、接收axios传递的json数据，必须加@RequestBody，单值无法接收

axios.post("http://localhost:9090/admin/insert", {aid:5,apwd:5,aname:5}).then(function (res) {
if(res.data == "1"){
console.log("ok")
}else{
console.log("fail")
}
})

controller

 @RequestMapping("/insert")
    //返回json形式
    public String insert(@RequestBody Admin a){
        try {
            as.save(a);
            System.out.println("录入成功");
            return "1";
        } catch (Exception e) {
            e.printStackTrace();
        }
        return "0";
    }

2、单值传递

简单方式：

axios.post("http://localhost:9090/admin/delete","aid=14").then(function(res){
				if(res.data=="1"){
					console.log("ok")
				}else{
					console.log("fail")
				}
			}) 

controller---实现删除操作

@RequestMapping("/delete")
    public String delete(String aid){
        try {
            as.removeById(aid);
            System.out.println("删除成功");
            return "1";
        } catch (Exception e) {
            e.printStackTrace();
        }
        return "0";
    }

3、URLSearchParams方式传递单值和多值（axios官网提供）

这个方法在axios的官网中有介绍，除了这个方法还有qs这个方法

res是相应数据

实现单值传递：----selectOne

//URLSearchParams方式传参,不传json
			 var param = new URLSearchParams();
			param.append("aid","1");
			param.append("aname","任柏熙");
			axios.post("http://localhost:9090/admin/selectOne",param).then(function(res){
				console.log(res.data);
			}) 

controller

@RequestMapping("/selectOne")
    public Admin selectOne(String aid){
        Admin admin = as.getById(aid);
        System.out.println("查询成功");
        return admin;
    }

实现多值传递----批量删除

 var param = new URLSearchParams();
			param.append("aid",['12','13']);	
			axios.post("http://localhost:9090/admin/deleteList",param).then(function(res){
				console.log(res.data);
			})

//批量删除
    @RequestMapping("/deleteList")
    public String deleteList(String[] aid){
        try {
            //把数组转换为集合
            as.removeByIds(Arrays.asList(aid));
            System.out.println(aid + "删除成功");
            return "1";
        } catch (Exception e) {
            e.printStackTrace();
        }
        return "0";
    }

admin.xml(02vue)

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* 激活  高亮显示 */
			.active{
				color: red;
				background-color: #409EFF;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- 删除 -->
			<div v-show="show">
				<table border="" cellspacing="" cellpadding="">
					<tr>
						<th>编号</th>
						<th>姓名</th>
						<th>密码</th>
						<th>角色</th>
						<th>备注</th>
						<th>操作</th>
					</tr>
					<tr v-for="(a,i) in list" :class="{active: i==j}" @mousemove="j=i" @mouseout="j=100">
						<!-- 把当前行的信息放入到表单里 {}写当前行数据  -->
						<td><a href="javascript:;" @click="show=false,vm.a=a,action='update'">{{a.aid}}</a></td>
						<td>{{a.aname}}</td>
						<td>{{a.apwd}}</td>
						<td>{{a.rid}}</td>
						<td>{{a.abackup}}</td>
						<td>
							<button @click="deladmin(i)">删除</button>
							<button  type="button"  @click="show=false,vm.a=a,action='update'">更新</button>					
						</td>
					</tr>				
				</table>
				<!-- a={}重新赋值一下 -->
				<button @click="show=false,a={},action='insert'" >添加</button>
			</div>
			<!-- 录入和修改 -->
			<div v-show="!show">
				<form action="" method="">
					编号：<input v-model="a.aid" /><br />
					姓名：<input v-model="a.aname" /><br />
					密码：<input v-model="a.apwd" /><br />
					角色：<input v-model="a.rid" /><br />
					备注：<input v-model="a.abackup" /><br />
					<!-- 走的都是ajax  按钮：button -->
					<button type="button" @click="insadmin()">操作</button>
					<button @click="show=true">返回</button>
				</form>
			</div>
			
		</div>
		<script src="js/axios.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data:{
					show:true,
					list:[],
					a:{},
					action: '',
					j: 0,
				},
				//页面加载的时候把值加载出来,交给list绑定,再把数据展示出来
				created() {
					//统一解决路径问题
					axios.defaults.baseURL="http://localhost:9090/";
					axios.post("admin/selectList").then(function(res){
						//取出的结果res给list
						vm.list=res.data
					})
				},
				methods:{
					/* 变成动态方法，可实现录入和更新 */
					insadmin(){
						axios.post("admin/"+this.action, this.a).then(function(res){
							if(res.data=="1"){
								alert("操作成功")
								//vm.list.push(vm.a)
								if (vm.action =='insert') {
									vm.list.push(vm.a)
									vm.a={}
								}
							}else{
								alert("操作失败")
							}
						})
					},
					deladmin(i){
						axios.post("admin/delete",'aid='+this.list[i].aid).then(function(res){
							if(res.data=="1"){
								alert("删除成功")
								vm.list.splice(i,1)
							}else{
								alert("删除失败")
							}
						})
					}
					
				}
			})
		</script>
	</body>
</html>