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头: