正文 

当前位置： 首页 > 知识 > java教程

前后端分离学习笔记---[跨域问题,jwt,路由守卫,axios设置请求拦截和响应拦截](代码片段)

小智RE0 小智RE0     2023-03-09     283

关键词：

文章目录

跨域问题

跨域是指从一个域名的网页去请求另一个域名的资源。
浏览器对 JavaScript 具有默认的安全限制,同源处理策略;

同源 : 协议，域名，端口都相同;
只要 协议，域名，端口中任何一个是不同的，就是跨域;

如果一个网页可以随意地访问另外一个网站的资源，那么就有可能在客户完全不知情的情况下出现安全问题。
但是在某些情况下时需要跨域的,这次学习前后端项目分离时,前后端服务器的端口不一样,这就需要跨域进行请求和响应数据信息;或者说在同一项目中需要访问子域系统模块,就需要跨域访问;
那么当然也可以不跨域完成,即在一个打开的窗口中内嵌窗口进行链接请求访问.

后端配置解决跨域

跨域资源共享（Cross-originResource Sharing）

  • 实现跨站访问控制，可安全地进行跨站数据传输;
  • 服务器端对于 CORS 的支持，需要设置 Access-Control-Allow-Origin;要在后台中加上响应头来允许域请求.
  • 当浏览器检测到了配置，才允许 Ajax 进行跨域的访问;

(1) 在类或方法上使用注解@CrossOrigin("...配置Ip和端口");仅达到局部配置跨域的效果[仅在使用了注解的地方生效];

比如在上次搭建的案例中就用了这个注解;前后端分离学习笔记(1) —[Vue基础]

(2)手工设置响应头-----使用 HttpServletResponse 对象来添加响应头
（Access-Control-Allow-Origin）来授权原始域
Origin 的值也可以设置为"*" ，表示全部放行

例如

@RequestMapping("/test")
    @ResponseBody
    public String index(HttpServletResponse response)
        response.addHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5277/");
        return "Hello World";

(3)使用配置类完成全局跨域设置—>返回一个新的 CorsFilter Bean，并添加映射路径和具体的 CORS
配置信息

配置类

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;
import java.util.Collections;


@Configuration
public class CorsConfig 
    @Bean
    public CorsFilter corsFilter() 
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        //1,允许任何来源
        corsConfiguration.setAllowedOriginPatterns(Collections.singletonList("*"));
        //2,允许任何请求头
        corsConfiguration.addAllowedHeader(CorsConfiguration.ALL);
        //3,允许任何方法
        corsConfiguration.addAllowedMethod(CorsConfiguration.ALL);
        //4,允许凭证
        corsConfiguration.setAllowCredentials(true);

        UrlBasedCorsConfigurationSource source
                = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", corsConfiguration);
        return new CorsFilter(source);

Json web token

传统的基于session访问鉴权机制

在之前的学习中,后端标识信息的处理一般都放在了后端的session中;

根据 http 协议，我们并不能知道是哪个用户发出的请求，所以为了让我们的应用能识别是哪个用户发出的请求，我们只能在服务器存储一份用户登录的信息，这份登录信息会在响应时传递给浏览器，告诉其保存为 cookie,以便下次请求时发送给我们的应用.

那么当出现不同的客户端,不同的用户时,独立的服务器已无法承载更多的用户，而这时候基于 session 认证就出现问题了,服务器可能会受到恶意的信息交互.

  • 扩展性: 用户认证之后，服务端做认证记录，如果认证的记录被保存在内存中的话，这意味着用户下次请求还必须要请求在这台服务器上,这样才能拿到授权的资源，这样在分布式的应用上，限制了负载均衡器的能力 , 限制了应用的扩展能力。
  • CSRF (跨站请求伪造):因为是基于 cookie 来进行用户识别的, cookie 如果被截获，用户就会很容易受到跨站请求伪造的攻击。

基于 token 的访问鉴权机制

它是无状态的,不需要在服务端去保留用户的认证信息或者会话信息。这就意味着基于 token 认证机制的应用不需要去考虑用户在哪一台服务器登录了，便于应用扩展.

  • 用户使用账号和密码发出 post 请求；
  • 服务器使用私钥创建一个 jwt；
  • 服务器返回此 jwt给浏览器；
  • 浏览器将该 jwt 串在请求头中像服务器发送请求；
  • 服务器验证该 jwt；
  • 返回响应的资源到浏览器。

Json web token

JWT 是为在网络应用环境间传递声明而执行的一种基于 JSON 的开放标准（(RFC 7519);定义的一种简洁的，自包含的方法用于通信双方之间以 JSON 对象的形式安全的传递信息。
由于是经过签名的,所以通信信息是安全的;JWT 可使用 HMAC 算法/ RSA 的公私秘钥对进行签名.

  • 只要一次登录后;在接下来的每个请求中包含JWT，可以用来验证用户身份以及对路由，服务和资源的访问权限进行验证,访问不同的域明也没有问题.
  • 信息交换在通信的双方之间使用 JWT 对数据进行编码是一种非常安全的方式，由于它的信息是经过签名的，可以确保发送者发送的信息是没有经过伪造的。

特点

  • 简洁(Compact): 可以通过 URL，POST 参数或者在 HTTP header 发送，数据量小，当然传输速度也很快.
  • 它具有自包含(Self-contained)性：负载中包含了所有用户所需要的信息，避免了多次查询数据库(但是建议不要将重要信息存入其中[比如密码,私密信息等]);
  • 由于 Token 在传递时会以 JSON 加密的形式发到倒客户端，所以 JWT 是跨语言的，原则上任何 web 形式都支持。
  • 无需在服务端保存会话信息，因为只要系统登录后,它每次接受请求时都会去验证请求头中的token令牌是否符合设定的签名规则,较适用于分布式微服务。

JWT结构
由三部分构成
头部（header)

完整的头部例如：

 'typ': 'JWT',
 'alg': 'HS256'

然后将头部进行 base64 转码,构成了第一部分.
eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9
10010101 01010101
100101 010101 01010

载荷（payload, 保存用户的信息[例如用户Id,账号])
签证（signature).

jwt 的第三部分是一个签证信息，这个签证信息由三部分组成：
• header (base64 后的)
• payload (base64 后的)
• secret

具体的搭建引入
在项目的pom.xml中引入依赖

<dependency>
 <groupId>com.auth0</groupId>
 <artifactId>java-jwt</artifactId>
 <version>3.8.2</version>
 </dependency>

配置类设置

package com.xiaozhi.backserver.startspringboot.util;

import com.auth0.jwt.JWT;
import com.auth0.jwt.algorithms.Algorithm;
import com.auth0.jwt.interfaces.DecodedJWT;
import com.auth0.jwt.interfaces.JWTVerifier;

import java.util.Date;
import java.util.HashMap;
import java.util.Map;

/**
 * @author by @CSDN 小智RE0
 * @date 2021-12-28 
 */

public class JWTUtil 
    /**
     * jwt生成token
     * @param id 管理员Id
     * @param account 管理员账号
     * @param type    管理员类型
     * @return
     */
    public static String token (Integer id, String account,Integer type)
        String token = "";
        try 
            //过期时间 为1970.1.1 0:0:0 至 过期时间  当前的毫秒值 + 有效时间
            Date expireDate = new Date(new Date().getTime() + 1800*1000);
            //秘钥及加密算法
            Algorithm algorithm = Algorithm.HMAC256("ZCEQIUBFKSJBFJH2020BQWE");
            //设置头部信息
            Map<String,Object> header = new HashMap<>();
            header.put("typ","JWT");
            header.put("alg","HS256");
            //携带id，账号信息，生成签名
            token = JWT.create()
                    .withHeader(header)
                    .withClaim("id",id)
                    .withClaim("account",account)
                    .withClaim("type",type)
                    .withExpiresAt(expireDate)
                    .sign(algorithm);
        catch (Exception e)
            e.printStackTrace();
            return  null;
        
        return token;
    

    //验证Token是否还有效; true有效,false失效;
    public static boolean verify(String token)
        try 
            //验签
            Algorithm algorithm = Algorithm.HMAC256("ZCEQIUBFKSJBFJH2020BQWE");
            JWTVerifier verifier = JWT.require(algorithm).build();
            DecodedJWT jwt = verifier.verify(token);
            return true;
         catch (Exception e) //当传过来的token如果有问题,抛出异常
            return false;
        
    

    /**
     * 获得token 中playload部分数据,按需使用
     * @param token
     * @return
     */
    public static DecodedJWT getTokenInfo(String token)
        return JWT.require(Algorithm.HMAC256("ZCEQIUBFKSJBFJH2020BQWE")).build().verify(token);

后端配置拦截

自定义登录拦截器

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

/**
 * 登录拦截器
 *
 * */
public class LoginInterceptor implements HandlerInterceptor 
    //预处理-->进入到控制器之前
    //返回false 不进入处理器，返回true，就进入拦截器中执行
    //在控制器之前走这个，决定是否走这个控制器
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception 
        //在请求头中取到token令牌;
        String token = request.getHeader("token");
        //验证token;
        boolean b = JWTUtil.verify(token);
        //若令牌不符合则响应信息为 401;
        if(!b)
            response.getWriter().print(401);
        
        return b;

配置

import com.xiaozhi.backserver.startspringboot.util.LoginInterceptor;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class InterceptorConfig implements WebMvcConfigurer

	public void addInterceptors(InterceptorRegistry registry) 
		InterceptorRegistration inter =  registry.addInterceptor(new LoginInterceptor());
				inter.addPathPatterns("/**");
				//放行地址;登录请求访问路径
				inter.excludePathPatterns("/api/login/login");

路由守卫

全局配置
在路由配置的index.js中配置路由守卫,若在当前浏览器的session中没有找到token令牌,则强制将回退到登录页面;

//to-将要访问的页面地址,from-从哪个页面访问的,next-放行函数
rout.beforeEach((to, from, next) => 
	//如果用户访问的登录页，直接放行;
	if (to.path == '/login') 
		return next();
	 else 
		//若没有令牌,则推到登录页面;
		var token = window.sessionStorage.getItem("token");
		if (token == null) 
			return next("/login");
		 else 
			next();
		
	
)

Axios设置前端请求拦截和响应拦截

注意这里的401响应拦截,和后端设置的401登录请求拦截正好形成一个前后闭环;

//导入axios;
import axios from 'axios';
//设置访问后台服务器地址
axios.defaults.baseURL = "http://127.0.0.1:5277/api/";
//将 axios 挂载;
Vue.prototype.$http = axios;

//全局请求拦截和响应拦截配置;
//axios 请求拦截
axios.interceptors.request.use(config => 
	//为请求头对象，添加 Token 验证的 token 字段;
	config.headers.token = window.sessionStorage.getItem('token');
	return config;
)
// 添加响应拦截器
axios.interceptors.response.use((res) => 
	//后端拦截器拦截状态码;
	if (res.data == 401) 
		//清除session信息;
		window.sessionStorage.clear();
		router.replace("/login");
	
	//服务器异常状态码拦截;
	if(res.data.code == 500)
		this.$message(message:resp.data.msg,type: 'warning');
		return;
	
	return res;
);

基础整合一下登录案例

后端这里的话,和之前的差不多,服务层,数据访问层这里就不放了

/**
 * @author by @CSDN 小智RE0
 */
@RestController
@RequestMapping(value = "/api/login")
public class LoginController 


    CommonResult commonResult;

    @Autowired
    LoginService loginService;


    //跨域接收;
    //@CrossOrigin("http://localhost:8080/")
    @RequestMapping(value = "/login")
    public CommonResult login(@RequestBody Admin admin)
        try
            System.out.println(admin);

            Admin admin1 = loginService.loginUser(admin);
            if(admin1!=null)
                String token = JWTUtil.token(admin1.getId(), admin1.getAccount(),admin1.getType());
                admin1.setToken(token);

                commonResult = new CommonResult(200,"正确",admin1);
            else
                commonResult = new CommonResult(201,"账号或密码错误",null);
            
        catch (Exception e)
            e.printStackTrace();
            commonResult = new CommonResult(500,"服务器错误",null);
        
        return commonResult;

需要注意的是,数据响应时,注意分级
响应时同样还是用一个公共类进行封装,数据存储在属性data中;

import lombok.AllArgsConstructor;
import lombok.Data;
import lombok.NoArgsConstructor;

/**
 * @author by @CSDN 小智RE0
 * @date 2021-12-28 16:02
 */
@Data
@NoArgsConstructor
@AllArgsConstructor
public class CommonResult 
    private Integer code;
    private String msg;
    private Object data;

在取得响应的数据时需要写两级data,第一级的data是axios数据请求响应时的数据域,第二级才是公共类中的属性data数据;

前端登录组件Login.vue

<template>
  <div class="login_container">
     <!-- 登录盒子-->
     <div class="login_box">
          <!-- 头像盒子-->
          <div class="img_box">
                <img src="../assets/logo.png" />
          </div>
        <div style="margin-top: 100px; padding-right: 30px;">
			<!-- 登录表单-->
			 <el-form ref="form" :model="form" label-width="80px">
			   <el-form-item label="账号">
			     <el-input v-model="form.account"></el-input>
			   </el-form-item>
			   <el-form-item label="密码">
			     <el-input type="password" v-model="form.password"></el-input>
			   </el-form-item>
			   
			   <el-form-item>
			     <el-button type="primary" plain @click="login()">登录</el-button>
			     <el-button>取消</el-button>
			   </el-form-item>
			 </el-form>
		</div>
     </div>
  </div>
</template>

<script>
	export default
		data:function()
			return
				form:
					account:"",
					password:""
				
			
		,
		methods:
		  login()
			  //注意这里定义 _this, this是vue对象;
			  var _this = this;
			  //console.log(this.form);
			  this.$http.post("login/login",this.form).then(function(resp)
				  //回调函数;
				 console.log(resp);
				 //警告消息弹框;
				  if(resp.data.code == 201)
					  _this.$message(message:resp.data.msg,type: 'warning');
					  查看详情  

                

前后端分离实践—如何解决跨域问题


随着前端越来越火，越来越多的人推崇前后端分离，后端只提供API，前端只负责消费API。这样我们就能更加专注自己的事情了，比如前端可以使用任何想要的工具（Webpack、Gulp等等），后端也不用因为集成前端的代码而苦逼加班...  查看详情  

                

前后端分离学习笔记---[vue基础](代码片段)


文章目录1.关于前后端分离2.vue基本学习3.vue-cli搭建项目4.页面路由5.ElementUI6.Axios异步通信建议官方文档学习VUE2.0版本在线文档1.关于前后端分离前端html页面通过ajax调用后端的restufulapi接口并使用json数据进行交互.前端服务器使用n...  查看详情  

                

django前后端分离开发解决跨域问题(代码片段)


django前后端分离开发解决跨域问题利用django-cors-headers插件来解决前后端分离时遇到的跨域问题第一步安装django-cors-headerspipinstalldjango-cors-headers第二步在settings.py文件中进行配置在INSTALLED_APPS里添加"corsheaders"INSTALLED_APPS=[......  查看详情  

                

前后端分离的跨域请求问题解决


因为工作中接触到了，就记录下来。主要是两个jar包的使用可以自己看看源码或是其他对内部方法讲解的资料。web.xml配置。   查看详情  

                

前端前后端分离开发调试过程中跨域问题解决方式


1.将后台代码部署到你的电脑(安装各种jdk或者环境软件)-麻烦!后台改了代码得找后台要2.将前端代码放到跟服务器代码一起-麻烦!前端改一下东西就得上传一次3.使用方便快捷的nginx做代理(仅仅需要下载nginx稍加配置,一次性避免上...  查看详情  

                

解决前后端分离后的cookie跨域问题


 一.前端Ajax关键配置$.ajax({type:"post",url:xxx,data:xxx,contentType:‘application/json‘,dataType:"json",xhrFields:{withCredentials:true},success:function(data){}})　二、后端过滤器关键配置//解决Cookie跨域问题response.setH  查看详情  

                

aspnetmvc前后端分离项目手记关于跨域问题（还有前言）


 前言，最近的项目使用前后端分离的模式，记录其中一些知识点。经过这个项目，也对前后端分离有了更多理解，尤其是在技术之外的方面。   越来越多的项目采用前后端分离的原因，有两点：   1，...  查看详情  

                

vue前后端分离解决跨域问题


用Vue-cli脚手架搭建了个demo,前后分离就有跨域问题的出现。vue-clie搭建demo步骤（传送门）：https://www.cnblogs.com/wangenbo/p/8487764.html我自己在网上找了2个接口做测试：CSDN：https://www.csdn.net/api/articles?type=more&category=home&shown_offs  查看详情  

                

前后端分离项目知识汇总（开发流程，跨域，开发接口）


...​​项目功能模块介绍​​​​项目技术点介绍​​​​前后端分离​​​​二、项目开发​​​​前端相关知识点​​​​开发CRUD接口​​​​改造登录到本地接口​​​​跨域​​​​如何解决跨域问题？​​​​登录功...  查看详情  

                

vue+gin前后端分离


参考技术A很简单，写个api接口搭建vue环境，两个单页面main.js需要使用路由和axiosvue.config.js需要配置跨域的代理router.js两个页面的路由app.js使用路由abc.vue需要调用后台的api  查看详情  

                

django开发之前后端分离开发模式(代码片段)


1.什么是前后端分离开发的概念:前端页面运行前端服务器上,负责页面的渲染(静态文件的加载)与跳转后端代码运行在后端服务器上,负责数据的处理(提供数据请求的接口)2.前后端分离开发碰到的问题那就是跨域请求的问题:什么是...  查看详情  

                

nodejs--jwt在前后端分离中的应用与实践


nodejs--JWT在前后端分离中的应用与实践   http://www.cnblogs.com/lidongyue/p/5269695.html  查看详情  

                

dnago前后端分离如何解决跨域请求问题


1.pipinstalldjango-cors-headers2.添加应用INSTALLED_APPS=( …‘corsheaders‘,...12) 3.中间层设置MIDDLEWARE=[‘corsheaders.middleware.CorsMiddleware‘,...12] 4.添加白名单 （在这里添加后端的ip）CORS_ORIGIN_WHITEL  查看详情  

                

前后端分离，解决跨域问题及django的csrf跨站请求保护(代码片段)


1.前后端分离解决跨域问题解决跨域调用服务并设置headers主要的解决方法需要通过服务器端设置响应头、正确响应options请求，正确设置JavaScript端需要设置的headers信息方能实现；关于跨域，前端会先发送OPTIONS请求，进行预检，...  查看详情  

                

vue2前后端分离项目ajax跨域session问题解决


参考技术AVue2.0中解决cookie和session的发送和接收问题http://www.open-open.com/lib/view/open1493260982052.html  查看详情  

                

jwt前后端分离demo(代码片段)


后端项目完整代码:https://github.com/shenweiquan/jwt-demo一：准备工作　　1-1运行环境：　　后端：jdk1.8，springboot，jwt　　前端：vue，elementui　　1-2创建前端和后端项目　　后端项目结构: 　　  二：重要的代码　　JwtUtilpacka...  查看详情  

                

springboot前后端分离跨域


@ConfigurationpublicclassCrossConfigimplementsWebMvcConfigurer{@OverridepublicvoidaddCorsMappings(CorsRegistryregistry){registry.addMapping("/**").allowedOrigins("*").allowCredentials(true).allowedMet  查看详情