已拦截跨源请求：同源策略禁止读取远程资源，不允许有多个或缺少Access-Control-Allow-Origin CORS头

Vue + SpringBoot开发移动端app

问题：无法跨源进行请求，不允许有多个CORS头

解决方案：后端添加过滤器，开放远程资源的读取

/**
 * @Author: Jancoyan
 * @Date: 2021/8/23
 * @Description:
 * @Version: 1.0
 */

package com.jancoyan.commentset.config;

import org.springframework.web.servlet.HandlerInterceptor;
import org.springframework.web.servlet.ModelAndView;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class AllowOriginIntercepter implements HandlerInterceptor {
    @Override
    public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) {
	    // 就是这一句
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods","GET, POST, DELETE, PUT, HEAD");
        response.setHeader("Access-Control-Allow-Headers","X-Requested-With, Authorization, Content-Type");
        return true;
    }

    @Override
    public void postHandle(HttpServletRequest request, HttpServletResponse response, Object handler,
                           ModelAndView modelAndView) throws Exception {
    }

    @Override
    public void afterCompletion(HttpServletRequest request, HttpServletResponse response, Object handler, Exception ex)
            throws Exception {
    }
}

/**
 * @Author: Jancoyan
 * @Date: 2021/8/23
 * @Description:
 * @Version: 1.0
 */

package com.jancoyan.commentset.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class MvcConfig implements WebMvcConfigurer {

    // 注册拦截器
    @Override
    public void addInterceptors(InterceptorRegistry registry) {
        registry.addInterceptor(new AllowOriginIntercepter());
    }
}

为什么用setHeader而不是addHeader？

• 因为本身会有一个Access-Control-Allow-Origin CORS头，再添加一个会报错不允许有多个CORS头：