问一下，就是为什么我后端添加了session，前端没有收到

Question

后端代码

@Controller
@CrossOrigin
@RequestMapping("/VerifyCode")
public class VerifyCodeController {
    final int width = 400;
    final int height = 200;
    final String imgType = "jpeg";
    @GetMapping("/GetCode")
    public void getcode(HttpServletRequest request, HttpServletResponse response) throws Exception {
        HttpSession session = request.getSession();
        ServletOutputStream outputStream = response.getOutputStream();
        String url = request.getRequestURI();
        System.out.println("Hello"+url);
        String code = GraphicsHelper.create(width, height, imgType, outputStream);
        session.setAttribute(url,code);
        System.out.println("验证码为"+session.getAttribute(url));

    }
}


```Java
public class GraphicsHelper {

    public static String create(final int width, final int height, final String imgType, OutputStream output ){
        StringBuffer sb = new StringBuffer();
        Random random = new Random();
        BufferedImage image = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
        Graphics graphic = image.getGraphics();
        graphic.fillRect(0,0,width,height);
        Color[] colors = new Color[] { Color.BLUE, Color.GRAY, Color.GREEN, Color.RED, Color.BLACK, Color.ORANGE,
                Color.CYAN };
        // 在 "画板"上生成干扰线条 ( 50 是线条个数)
        for (int i = 0; i < 50; i++) {
            graphic.setColor(colors[random.nextInt(colors.length)]);
            final int x = random.nextInt(width);
            final int y = random.nextInt(height);
            final int w = random.nextInt(20);
            final int h = random.nextInt(20);
            final int signA = random.nextBoolean() ? 1 : -1;
            final int signB = random.nextBoolean() ? 1 : -1;
            graphic.drawLine(x, y, x + w * signA, y + h * signB);
        }

        // 在 "画板"上绘制字母
        graphic.setFont(new Font("Comic Sans MS", Font.BOLD, 30));
        for (int i = 0; i < 6; i++) {
            final int temp = random.nextInt(26) + 97;
            String s = String.valueOf((char) temp);
            sb.append(s);
            graphic.setColor(colors[random.nextInt(colors.length)]);
            graphic.drawString(s, i * (width / 6), height - (height / 3));
        }
        graphic.dispose();
        try {
            ImageIO.write(image, imgType, output);
        } catch (IOException e) {
            e.printStackTrace();
        }
        return sb.toString();
    }
}

前端代码

<template>
  <div>
    <input type="text" name="" ref="val" id="">
    <input type="button" @click="refush()">
    <img ref="code" src="http://localhost:8888/web/VerifyCode/GetCode">

  </div>
</template>

<script>
var socket;
export default {
name: "chat",
  data(){
    return{


    }
  },beforeMount() {
    if(typeof WebSocket == undefined){
      return console.log("您的浏览器不支持Websocket")
    }
    else{
      socket = new WebSocket("ws://localhost:8010");
    }

  }
  ,methods:{
    refush(){
      this.$refs.code.src="http://localhost:8888/web/VerifyCode/GetCode?time="+new Date();
      var ajax = new XMLHttpRequest();
      ajax.open("get","http://localhost:8888/web/VerifyCode/GetCode")
      ajax.send();

    },
   
  }


}
</script>

<style scoped>

</style>

Answer 1

嗯，代码有点乱，前端拿session的话，好像只能通过java脚本那，写到jsp里，单纯的前端得方式，好像不行吧，

看你的代码，好像要返回图片。你用的原生的AJAX写的，需要有responseText方法来接受你的串。一般的话会返回Base64编码图片。 所以你拿到串的话需要用window.btoa（）转一下。然后加一个前缀放到img里

如果你直接想用src的话，只能是后端把图片生成了，前端给个地址，直接访问图片资源的的那种。

验证码的话，后端把图片数子保存好，一般是前端收到图片，然后后端校验的。