在前端解决跨域

1、环境依赖
C:\Users\cyberzhaohyvm>node -v
v14.17.3

C:\Users\cyberzhaohyvm>vue -V
@vue/cli 5.0.4

2、在项目所在目录，安装axios

进入项目所在目录：
D:\01sourcecode\10Tutorial\08Vue\17-2022-12-28-v2\elementui-demo
npm install axios

3、vue.config.js添加配置

module.exports = {

  devServer: {

    proxy: {

      '/api': {

        target: 'http://localhost:3000',

        changeOrigin: true,

        pathRewrite: {

          '^/api': ''

        }

      }

    }

  }

}

4、App.vue调用

import axios from 'axios'

<input type="button" value="跨域请求" @click="getToken">

    getToken(){

      axios.post('api/user/login',{

        username: 'zhangsan'

      }).then(function(response){

        console.log(response)

      }).catch(function(error){

        console.log(error)

      });

    }

5、springboot开发的一个服务端

@RestController

@RequestMapping("/user")

public class UserController {

    @PostMapping("/login")

    public Result login(@RequestBody User user){

        String token = JwtUtils.generateToken(user.getUsername());

        return Result.ok().data("token",token);



    }

}

package com.xdy.springboot4vue.utils;

import io.jsonwebtoken.Claims;
import io.jsonwebtoken.Jwts;
import io.jsonwebtoken.SignatureAlgorithm;

import java.security.Signature;
import java.util.Date;

public class JwtUtils {
    private static Integer expire = 604800;
    private static String secret = "abcdefghiabcdefghiabcdefghiabcdefghi";
    public static String generateToken(String username){
        Date now = new Date();
        Date expiration = new Date(now.getTime() + 1000 * expire);
        return Jwts.builder().setHeaderParam("type","JWT").setSubject(username).setIssuedAt(now).setExpiration(expiration).signWith(SignatureAlgorithm.HS256,secret).compact();
    }
    public static Claims getClaimsByToken(String token){
         return Jwts.parser().setSigningKey(secret).parseClaimsJws(token).getBody();

    }
}

package com.xdy.springboot4vue.utils;

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

public class Result {
    private Boolean success;
    private Integer code;
    private String message;
    private Map data = new HashMap();

    public Boolean getSuccess() {
        return success;
    }

    public void setSuccess(Boolean success) {
        this.success = success;
    }

    public Integer getCode() {
        return code;
    }

    public void setCode(Integer code) {
        this.code = code;
    }

    public String getMessage() {
        return message;
    }

    public void setMessage(String message) {
        this.message = message;
    }

    public Map getData() {
        return data;
    }

    public void setData(Map data) {
        this.data = data;
    }
    private Result(){

    }
    public static Result ok(){
        Result r = new Result();
        r.setSuccess(true);
        r.setCode(ResultCode.SUCCESS);
        r.setMessage("成功");
        return r;
    }
    public static Result error(){
        Result r = new Result();
        r.setSuccess(false);
        r.setCode(ResultCode.ERROR);
        r.setMessage("失败");
        return r;
    }
    public Result success(Boolean success){
        this.setSuccess(success);
        return this;
    }
    public Result message(String message){
        this.setMessage(message);
        return this;
    }
    public Result data(String key, Object value){
        this.data.put(key,value);
        return this;
    }
    public Result data(Map map){
        this.setData(map);
        return this;
    }
}

pom.xml配置文件

    4.0.0
    
        org.springframework.boot
        spring-boot-starter-parent
        2.7.5
         
    
    com.xdy.springboot4vue
    springboot4vue
    0.0.1-SNAPSHOT
    springboot4vue
    Demo project for Spring Boot
    
        1.8
    
    
        
            org.springframework.boot
            spring-boot-starter-web
        

        
            org.springframework.boot
            spring-boot-starter-test
            test
        
        
            net.minidev
            json-smart
            2.3.1
            compile
        
        
            com.alibaba
            fastjson
            1.2.40
        
        
            com.baomidou
            mybatis-plus-boot-starter
            3.4.2
        
        
            mysql
            mysql-connector-java
            5.1.47
        
        
            com.alibaba
            druid-spring-boot-starter
            1.1.20
        
        
            io.jsonwebtoken
            jjwt
            0.9.0
        
    

    
        
            
                org.springframework.boot
                spring-boot-maven-plugin
            
        
    

6、效果图：

http://localhost:8080/