前端Vue后端springBoot跨域问题解决大全

前端Vue后端springBoot跨域问题解决大全 前端Vue后端springBoot加SpringSecurity跨域问题解决大全

最好的方法就是前后端一起配置解决

前端 vue.config.js文件

module.exports = {
devServer: {
// 端口号
port: 8080,
// 配置不同的后台API地址
proxy: {
    '/api':{
        target: 'http://localhost:8081/',
        changeOrigin: true,
        pathRewrite: {
            '^/api': ''
        }
    }
}
}
}

这个文件在vue的项目里是自己创建的，创建在与package.json文件同目录下

安装qs

npm install qs

这个文件是在后面security登录时在浏览器用到的(找了很久的错误，如果没有会出现，在PostMan能成功登录，但是在浏览器上却一直显示密码错误)

main.js

import qs from 'qs'
Vue.prototype.$qs=qs

axios.defaults.baseURL = 'http://localhost:8081'//方便写axios时直接使用

调用的方法

Login.vue

methods: {
    submitForm(formName) {
        const _this=this
        this.$refs[formName].validate((valid) => {
            if (valid) {
                axios({method:'post',
                    dataType:"json",
                    url:'/login',
                    data: this.$qs.stringify(this.dynamicValidateForm),
                    withCredentials:true//这句很重要，意思是可以携带cookie
                }).then(function (resp) {
                        console.log(resp.data)
                })
            } else {
                console.log('error submit!!');
                return false;
            }
        });
    },
    resetForm(formName) {
        this.$refs[formName].resetFields();
    }
}

后端 WebConfiguration.java

package com.kz.mall.configuration;

import com.kz.mall.interceptor.TestInterceptor;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
public class WebConfiguration implements WebMvcConfigurer {
    private final TestInterceptor testInterceptor;

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("
@Data
public class JsonResult implements Serializable {
    private boolean success;
    private Integer errorCode;
    private String errorMsg;
    private T data;

    public JsonResult() {
    }

    
    public JsonResult(boolean success) {
        this.success = success;
        this.errorCode = success ? ResultCode.SUCCESS.getCode() : ResultCode.COMMON_FAIL.getCode();
        this.errorMsg = success ? ResultCode.SUCCESS.getMessage() : ResultCode.COMMON_FAIL.getMessage();
    }

    public JsonResult(boolean success,ResultCode resultEnum,String errorMsg){
        this.success=success;
        this.errorCode = success ? ResultCode.SUCCESS.getCode() : (resultEnum == null ? ResultCode.COMMON_FAIL.getCode() : resultEnum.getCode());
        this.errorMsg = success ? ResultCode.SUCCESS.getMessage() : errorMsg;
    }

    
    public JsonResult(boolean success, ResultCode resultEnum) {
        this.success = success;
        this.errorCode = success ? ResultCode.SUCCESS.getCode() : (resultEnum == null ? ResultCode.COMMON_FAIL.getCode() : resultEnum.getCode());
        this.errorMsg = success ? ResultCode.SUCCESS.getMessage() : (resultEnum == null ? ResultCode.COMMON_FAIL.getMessage() : resultEnum.getMessage());
    }

    
    public JsonResult(boolean success, T data) {
        this.success = success;
        this.errorCode = success ? ResultCode.SUCCESS.getCode() : ResultCode.COMMON_FAIL.getCode();
        this.errorMsg = success ? ResultCode.SUCCESS.getMessage() : ResultCode.COMMON_FAIL.getMessage();
        this.data = data;
    }

    
    public JsonResult(boolean success, ResultCode resultEnum, T data) {
        this.success = success;
        this.errorCode = success ? ResultCode.SUCCESS.getCode() : (resultEnum == null ? ResultCode.COMMON_FAIL.getCode() : resultEnum.getCode());
        this.errorMsg = success ? ResultCode.SUCCESS.getMessage() : (resultEnum == null ? ResultCode.COMMON_FAIL.getMessage() : resultEnum.getMessage());
        this.data = data;
    }
}

ResultCode

package com.kz.mall.util.result;

import lombok.AllArgsConstructor;
import lombok.Getter;


@Getter
@AllArgsConstructor
//@Setter
public enum ResultCode {
    
    SUCCESS(200, "成功"),

    
    COMMON_FAIL(999, "失败"),

    
    PARAM_NOT_VALID(1001, "参数无效"),
    PARAM_IS_BLANK(1002, "参数为空"),
    PARAM_TYPE_ERROR(1003, "参数类型错误"),
    PARAM_NOT_COMPLETE(1003, "参数缺失"),

    
    USER_NOT_LOGIN(2001, "用户未登录"),
    USER_ACCOUNT_EXPIRED(2002, "账号已过期"),
    USER_CREDENTIALS_ERROR(2003, "密码错误"),
    USER_CREDENTIALS_EXPIRED(2004, "密码过期"),
    USER_ACCOUNT_DISABLE(2005, "账号不可用"),
    USER_ACCOUNT_LOCKED(2006, "账号被锁定"),
    USER_ACCOUNT_NOT_EXIST(2007, "账号不存在"),
    USER_ACCOUNT_ALREADY_EXIST(2008, "账号已存在"),
    USER_ACCOUNT_USE_BY_OTHERS(2009, "账号下线"),

    
    NO_PERMISSION(3001, "没有权限");
    private Integer code;
    private String message;

    //ResultCode(Integer code, String message) {
    //  this.code = code;
    //  this.message = message;
    //}
    public void setCode(Integer code) {
        this.code = code;
    }

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

    
    public static String getMessageByCode(Integer code) {
        for (ResultCode ele : values()) {
            if (ele.getCode().equals(code)) {
                return ele.getMessage();
            }
        }
        return null;
    }
}

ResultTool

package com.kz.mall.util.result;

import org.springframework.security.core.Authentication;
import org.springframework.security.core.context.SecurityContext;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpSession;
import java.util.Enumeration;

public class ResultTool {
    public static JsonResult success() {
        return new JsonResult(true);
    }

    public static  JsonResult success(T data) {
        return new JsonResult(true, data);
    }

    public static JsonResult fail() {
        return new JsonResult(false);
    }

    public static JsonResult fail(ResultCode resultEnum) {
        return new JsonResult(false, resultEnum);
    }

    public static JsonResult fail(ResultCode resultEnum,String errorMsg){return new JsonResult(false,resultEnum,errorMsg);}

    public static Authentication getAuthenticationByRequest(HttpServletRequest request) {
        // 首先获取 session 对象
        HttpSession session = request.getSession();

        // 去除 session 域中的所有属性名
        Enumeration attributeNames = session.getAttributeNames();

        //while (attributeNames.hasMoreElements()) {
        //  System.out.println(attributeNames.nextElement());
        //}

        // 获取 spring_security_context
        Object spring_security_context = session.getAttribute("SPRING_SECURITY_CONTEXT");

        //System.out.println(spring_security_context);

        SecurityContext securityContext = (SecurityContext) spring_security_context;

        // 获取认证信息
        Authentication authentication = securityContext.getAuthentication();
        return authentication;
    }
}

这是全部内容，有问题可以留言

我也是小白，所以哪里说的不好请大方指正，望共同进步