SpringBoot配合Vue前后端分离，前端请求跨域异常问题后端通过配置类加注解完美解决

前端请求，登出方法

  // user logout
  logout({ commit, state }) {
    return new Promise((resolve, reject) => {
      logout(state.token).then(() => {
        removeToken() // must remove  token  first
        resetRouter()
        commit('RESET_STATE')
        resolve()
      }).catch(error => {
        reject(error)
      })
    })
  },

里面一层的logout方法

export function logout() {
  return request({
    url: '/user/logout',
    method: 'post'
  })
}

request方法

import axios from 'axios'
// import { MessageBox, Message } from 'element-ui'
import store from '@/store'
import { getToken } from '@/utils/auth'

// create an axios instance
const service = axios.create({
  // baseURL: process.env.VUE_APP_BASE_API, // url = base url + request url
  baseURL: 'http://localhost:8080',
  // withCredentials: true, // send cookies when cross-domain requests
  timeout: 5000 // request timeout
})

// request interceptor
service.interceptors.request.use(
  config => {
    // do something before request is sent

    if (store.getters.token) {
      // let each request carry token
      // ['X-Token'] is a custom headers key
      // please modify it according to the actual situation
      config.headers['X-Token'] = getToken()
      console.log('获取的标头token为', getToken())
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)
export default service

请求执行会出现跨域异常。

这时后端能怎么做呢？

我给出两个解决方案：

1、控制器上加上注解@CrossOrigin

2、自定义MVC配置

import com.sifan.erp.interceptor.UserLoginInterceptor;
import org.springframework.beans.factory.annotation.Value;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.*;

@Configuration
public class InterceptorConfig implements WebMvcConfigurer {

    @Value("${allowedOrigins}")
    private String allowedOrigins;

    /**
     * 配置拦截器*
     *
     * @param interceptorRegistry
     */
    @Override
    public void addInterceptors(InterceptorRegistry interceptorRegistry) {
        InterceptorRegistration registry = interceptorRegistry.addInterceptor(new UserLoginInterceptor());

        //拦截所有请求，排除登录请求
        registry.addPathPatterns("/**")
                .excludePathPatterns("/user/login", "/error", "/login", "/user/register", "/404", "/500", "/user/loginname", "/",
                        "/views/static/css/**", "/views/static/font/**", "/views/static/images/**", "/views/static/js/**");

    }



    /**
     * 配置跨域*
     *
     * @param registry
     */
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins(allowedOrigins)
                .allowedHeaders("*")
                .allowedMethods("*")
                .maxAge(30 * 1000);
    }
}

# 跨域处理的url
allowedOrigins=http://localhost:9528

注意:这里配置跨域处理的url，前端也需要使用localhst

这里使用第一个地址访问前端项目，使用第二个的话也会产生跨域问题

特别注意： 有自定义拦截器的话需要加注解@CrossOrigin

@CrossOrigin
public class UserLoginInterceptor implements HandlerInterceptor {
}