springboot+vue项目 出现跨域问题(如图),百度两天了都没解决,有没有教育一二

img

你这是由于springboot项目端口与vue项目端口不一致导致的跨域问题,解决方案有两:

  1. vue使用代理
  2. 使用nginx代理
    由于浏览器升级,后端已经无法彻底解决跨域问题,所以这里不说了
//vue-cli3.0 里面的 vue.config.js做配置
devServer: {
    proxy: {
        '/rng': {     //这里最好有一个 /
            target: 'http://45.105.124.130:8081',  // 后台接口域名
            ws: true,        //如果要代理 websockets,配置这个参数
            secure: false,  // 如果是https接口,需要配置这个参数
            changeOrigin: true,  //是否跨域
            pathRewrite:{
                '^/rng':''
            }
        }
    }
  }

controller层里加注解@CrossOrigin

服务器添加全局filter了嘛?

@Component
public class OriginFilter implements Filter {
@Override
public void init(FilterConfig filterConfig) throws ServletException { }

@Override
public void doFilter(ServletRequest request, ServletResponse response, FilterChain filterChain) throws IOException, ServletException {
    HttpServletRequest httpServletRequest = (HttpServletRequest)request;
    HttpServletResponse httpServletResponse = (HttpServletResponse)response;
    httpServletResponse.setHeader("Access-Control-Allow-Methods", "GET,POST,OPTIONS,PUT,DELETE");
    httpServletResponse.setHeader("Access-Control-Max-Age", "3600");
    httpServletResponse.setHeader("Access-control-Allow-Origin", "*");
    httpServletResponse.setHeader("Access-Control-Allow-Headers", httpServletRequest.getHeader("Access-Control-Request-Headers"));

// httpServletResponse.setHeader("Access-Control-Allow-Credentials", "true");
// 跨域时会首先发送一个OPTIONS请求,这里我们给OPTIONS请求直接返回正常状态
if (httpServletRequest.getMethod().equals(RequestMethod.OPTIONS.name())) {
httpServletResponse.setStatus(HttpStatus.OK.value());
}
// filterChain.doFilter(request, response);
String contentType = request.getContentType();
if(null != contentType && contentType.contains(MediaType.MULTIPART_FORM_DATA_VALUE)){
//说明是文件上传
CommonsMultipartResolver commonsMultipartResolver = new CommonsMultipartResolver();
MultipartHttpServletRequest resolveMultipart = commonsMultipartResolver.resolveMultipart(httpServletRequest);
filterChain.doFilter(resolveMultipart, response);
}else {
CommonHttpServletRequestWrapper requestWrapper = new CommonHttpServletRequestWrapper(httpServletRequest);
filterChain.doFilter(requestWrapper != null ? requestWrapper :request,response);
}

}

@Override
public void destroy() { }

}

  1. 不同的端口会被理解成不同的host,所以最简单的一个思路是用相同的端口号,用子目录分开,这样就不存在跨域问题了。比如localhost:8080/backend, localhost:8080/front。
  2. 都放到一个反向代理后面,比如nginx,目的相似,也都是想保证域名相同,避免跨域。
  3. 不能保证一个域名,一定要跨域的话,就改后端springboot的access-control-allow-origin配置,相当于把前端的域名加到白名单里,网上应该也很多介绍,你baidu检索springboot+access-control-allow-origin肯定能找到。

参考一下https://blog.csdn.net/carbuser_xl/article/details/118545353