验证码(前后端分离)

该博客介绍了在前后端分离的环境下,如何通过Java后端和Vue前端配合实现验证码功能。具体涉及Java的CrossDomainFilter和PetApp配置,以及前端main.js的设置和Login.vue登录页面的回调。附带了实际效果展示。
摘要由CSDN通过智能技术生成

来源: 易途老师实训课程

CrossDomainFilter.java

package com.etoak.filter;
import java.io.IOException;

import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.FilterConfig;
import javax.servlet.ServletException;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletResponse;


import org.springframework.context.annotation.Configuration;
import org.springframework.stereotype.Component;
//跨域的过滤器\
//@Slf4j
//@Configuration
public class CrossDomainFilter implements Filter {
   

	@Override
	public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain)
			throws IOException, ServletException {
   
		HttpServletResponse httpResponse = (HttpServletResponse) response;

		// 允许所有的请求域名访问我们的跨域资源,可以固定单个或者多个内容
		httpResponse.setHeader("Access-Control-Allow-Origin", "*");//
		// httpResponse.setHeader("Access-Control-Allow-Origin", "http://localhost:9090");// 允许所有的请求域名访问我们的跨域资源,可以固定单个或者多个内容
		httpResponse.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT");// 允许何种请求方法访问该跨域资源服务器
		httpResponse.setHeader("Access-Control-Max-Age", "3600");// 预检请求的有效期,单位为秒。有效期内,不会重复发送预检请求
		httpResponse.addHeader("Access-Control-Allow-Headers",
				"Accept, Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With");// 允许所有的请求header访问,可以自定义设置任意请求头信息
		httpResponse.setHeader("Access-Control-Allow-Credentials", "true");// 是否允许用户发送、处理cookie
		httpResponse.setHeader("Access-Control-Expose-Headers","code");
		chain.doFilter(request, httpResponse);
	}

	@Override
	public void init(FilterConfig filterConfig) throws ServletException {
   
		//log.info("-----CrossDomainFilter init -------");
	}

	@Override
	public void destroy() {
   

	}

}

PetApp.ja

  • 1
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值