前后端分离跨域问题

最新推荐文章于 2023-11-12 15:00:39 发布

奔腾在代码路上的小白鼠

最新推荐文章于 2023-11-12 15:00:39 发布

阅读量792

点赞数

CC 4.0 BY-SA版权

分类专栏：错误文章标签： java

本文链接：https://blog.csdn.net/serialization_rong/article/details/105200018

错误专栏收录该内容

2 篇文章

订阅专栏

本文介绍了解决HTML5中跨域资源共享(CORS)问题的方法，包括Spring Boot过滤器配置、使用@CrossOrigin注解以及前端nginx配置策略，帮助开发者有效应对跨域请求限制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

No "Access-Control-Allow-Origin" header is present on the requested resouce.

在请求的资源上没有“访问控制允许源”标头。

Access-Control-Allow-Origin是HTML5中定义的一种解决资源跨域的策略。

他是通过服务器端返回带有Access-Control-Allow-Origin标识的Response header，用来解决资源的跨域权限问题。

1.springboot可以通过增加过滤器，对返回响应中的请求头增加相关配置，举例如下：

/**
 * @Auther: yujuan 过滤器 解决跨域问题
 * @Date: 19-3-25 17:39
 * @Description:
 */
@Component
public class CorsFilter implements Filter {
    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;

        HttpServletRequest reqs = (HttpServletRequest) req;

        // response.setHeader("Access-Control-Allow-Origin",reqs.getHeader("Origin"));
        response.setHeader("Access-Control-Allow-Origin","*");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, PATCH, DELETE, PUT");
        response.setHeader("Access-Control-Max-Age", "3600");
        response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
        chain.doFilter(req, res);
    }

    @Override
    public void init(FilterConfig filterConfig) {}

    @Override
    public void destroy() {}

}

从request 中的header中获取Origin，来做配置，最终成功并满足需求。

在dofilter中添加：

if (reqs.getMethod().equals( "OPTIONS" ) || reqs.getMethod().equals(HttpMethod.OPTIONS.name())) {
    response.setStatus(HttpStatus.OK.value());
    return;
}

当response.setHeader("Access-Control-Allow-Origin",reqs.getHeader("*"));有问题时可以改成动态配置，*号有时会不适配可以换成具体ip或者动态配置

response.setHeader("Access-Control-Allow-Origin",reqs.getHeader("Origin"));

2.通过配置注解，使用@CrossOrigin注解

在controller上或者具体类中的方法上使用。

3.通过配置前端nginx配置文件，控制option请求

通过配置location配置：

location / {  
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods 'GET, POST, OPTIONS';
    add_header Access-Control-Allow-Headers 'DNT,X-Mx-ReqToken,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Authorization';

    if ($request_method = 'OPTIONS') {
        return 200;
    }
}

具体参考： https://segmentfault.com/a/1190000012550346