前端服务请求跨域被拦截,Java后端Springboot服务解决办法

跨域问题

跨域前端遇到的问题:

Access to XMLHttpRequest at 'http://www.xxx.xxxx/api/x/d/xc' from origin 'http://127.0.0.1:3000' has been blocked by cors policy: No 'Access-Contorl-Allow-Origin' header is present on the requested resource.

其实我们看这个错误,很明显可以理解请求被拦截。为什么被拦截呢,其实后端默认返回的response header中没有'Access-Contorl-Allow-Origin'。

详细分析跨域

什么是跨域:当一个请求 url 的协议、域名、端口三者之间任意一个与当前页面 url 不同即为跨域,出现跨域错误的原因是:发起请求的服务(前端)所在域跟服务所在的域,不在同一个域中。

CORS 机制允许 Web 应用服务器进行跨源访问控制,从而使跨源数据传输得以安全进行。现代浏览器支持在 API 容器中(例如 XMLHttpRequest 或 Fetch)使用 CORS,以降低跨源 HTTP 请求所带来的风险。

Springboot配置跨域过滤器解决跨域问题

主要就是在后端返回的时候,自动给response加几个header,也可以使用拦截器或者其他方式处理。

java 复制代码
// 创建一个filter
@Component
public class CORSFilter implements Filter {
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletRequest request = (HttpServletRequest) req;
        HttpServletResponse response = (HttpServletResponse) res;

        response.setHeader("Access-control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Headers", "*");
        response.addHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT");
        if ("OPTIONS".equals(request.getMethod())) {
            response.setStatus(HttpStatus.NO_CONTENT.value());
            return;
        } else {
            chain.doFilter(request, response);
        }
    }

    public void init(FilterConfig filterConfig) {}

    public void destroy() {}
}

// 过滤器配置
@Configuration
public class AuthConfiguration {
    @Bean
    public FilterRegistrationBean<CORSFilter> corsFilterRegistrationBean(CORSFilter corsFilter){
        FilterRegistrationBean<CORSFilter> registrationBean = new FilterRegistrationBean<>();
        registrationBean.setFilter(corsFilter);
        registrationBean.setName("CORSFilter");
        registrationBean.setOrder(Ordered.HIGHEST_PRECEDENCE);
        registrationBean.addUrlPatterns("/*");
        registrationBean.setOrder(0);
        return registrationBean;
    }
}
相关推荐
万少25 分钟前
第五款 HarmonyOS 上架作品 奇趣故事匣 来了
前端·harmonyos·客户端
蓝澈112127 分钟前
迪杰斯特拉算法之解决单源最短路径问题
java·数据结构
OpenGL30 分钟前
Android targetSdkVersion升级至35(Android15)相关问题
前端
Kali_0734 分钟前
使用 Mathematical_Expression 从零开始实现数学题目的作答小游戏【可复制代码】
java·人工智能·免费
rzl021 小时前
java web5(黑马)
java·开发语言·前端
Amy.Wang1 小时前
前端如何实现电子签名
前端·javascript·html5
时序数据说1 小时前
为什么时序数据库IoTDB选择Java作为开发语言
java·大数据·开发语言·数据库·物联网·时序数据库·iotdb
今天又在摸鱼1 小时前
Vue3-组件化-Vue核心思想之一
前端·javascript·vue.js
蓝婷儿1 小时前
每天一个前端小知识 Day 21 - 浏览器兼容性与 Polyfill 策略
前端
百锦再1 小时前
Vue中对象赋值问题:对象引用被保留,仅部分属性被覆盖
前端·javascript·vue.js·vue·web·reactive·ref