VUE+springboot跨域问题

原创已于 2023-04-23 09:37:17 修改 · 781 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #spring boot #java

于 2023-03-23 17:15:29 首次发布

文章描述了在前后端分离的项目中，通过axios封装处理跨域问题，但在集成JWTtoken验证时重新出现跨域错误。通过在后端添加Spring的CORS过滤器解决了问题，过滤器为每个请求添加了支持跨域的头部。当遇到预检请求失败导致的跨域问题时，通过在过滤器中特别处理OPTIONS请求解决了这一问题。

之前解决了跨域问题，通过axios的封装，后端使用@CrossOrigin解决了跨域问题，但是今天再集成jwt的token拦截时由出现了跨域问题，和原来一样，通过模拟api工具直接发起可以收到，但是直接通过前端发起就会报错。
报错内容
尝试过给拦截器增加@CrossOrigin注解，但是结果还是没用。
之前使用的前端跨域方法：

const service = axios.create({
  // 联调
  // baseURL: process.env.NODE_ENV === 'production' ? `/` : '/api',
  baseURL: "http://localhost:9003",
  headers: {
    get: {
      'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
    },
    post: {
      'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8'
    }
  },
  timeout: 30000,

该段代码时vue封装axios时设置的一些属性，通过该种方法，在之前实现了前端的跨域请求。
但是当我后端加入了拦截器对请求进行拦截并验证token的时候，再次出现了该问题。
这次决定从后端解决跨域问题，经过网上冲浪找了半天，又问了半天chat，最后试了下后端增加过滤器（感觉跟拦截器差别不大啊）。
首先我在工具类里面加了个过滤器

import org.springframework.stereotype.Component;

import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

@Component
public class CorsFilter implements Filter {

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain)
            throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest request = (HttpServletRequest) req;
        response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "Content-Type, Authorization, X-Requested-With,accept, Origin");
        chain.doFilter(req, res);
    }

    @Override
    public void init(FilterConfig filterConfig) {}

    @Override
    public void destroy() {}
}

然后需要增加一个配置类去注册过滤器

import com.wyp.admin.common.CorsFilter;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.boot.web.servlet.FilterRegistrationBean;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;

@Configuration
public class AppConfig {
    @Autowired
    private CorsFilter corsFilter;

    @Bean
    public FilterRegistrationBean<CorsFilter> filterRegistrationBean() {
        FilterRegistrationBean<CorsFilter> registrationBean = new FilterRegistrationBean<>();
        registrationBean.setFilter(corsFilter);
        registrationBean.addUrlPatterns("/*");
        return registrationBean;
    }
}

增加这两个代码之后再次前端请求可以正常接收请求。
过滤器的主要功能就是给每一个接收到的请求增加支持跨域的请求头，之后便可以实现跨域请求。
这里过滤器的功能可能还需要修改，因为后续遇到了本来请求能通过，什么都没改突然就无法请求了，报的错还是跨域问题，报错显示it does not have a http or status.这种情况经过网上冲浪，得到原因可能是因为游览器发送给后端的预检请求没有通过，所以报了跨域问题。可以在过滤器中加入一下代码
if (OPTIONS.equals(((HttpServletRequest) request).getMethod())) { res.getWriter().println("ok"); return; }
去判断request是否是预检请求，如果是的话修改状态直接返回。修改之后可以正常发送请求。
后续如果还有问题会继续更新。