如何简单有效而彻底实现跨域访问

最新推荐文章于 2024-07-26 17:41:49 发布

javashareauthor

最新推荐文章于 2024-07-26 17:41:49 发布

阅读量263

点赞数

分类专栏：跨域访问文章标签：跨域访问

本文链接：https://blog.csdn.net/javashareauthor/article/details/108390716

版权

跨域访问专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了在接口开发中遇到的跨域问题及其解决方案。通过使用Spring框架的@CrossOrigin注解和自定义过滤器，设置HTTP响应头，实现对不同请求方式的跨域支持，包括POST、GET、PUT等。

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

在一次接口开发过程中，前端同事访问了我的接口：user/getUserInfo.html，前端的代码是加载在localhost:8080服务上的，访问远程这个接口的时候出现跨域问题，中间查询了很多资料，终极版本的解决方案如下：


import org.springframework.web.bind.annotation.CrossOrigin;

import javax.servlet.*;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * 跨域访问
 *
 * @author lh
 * @version 1.0
 * @date 2020-09-03 11:53
 */
public class CrossOriginFilter implements Filter {

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {
    }

    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse resp = (HttpServletResponse) response;
        HttpServletRequest req = (HttpServletRequest) request;
        String type = req.getMethod();
        resp.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE");
        resp.setHeader("Access-Control-Max-Age", "3600");
        resp.setHeader("Access-Control-Allow-Headers", "x-requested-with, Content-Type, Accept, Origin");
        resp.setHeader("Access-Control-Allow-Credentials", "true");
        if (type.toUpperCase().equals("OPTIONS") == true) {
            resp.setHeader("Access-Control-Allow-Origin", "*");
            resp.setHeader("Access-Control-Allow-Headers", "content-type");
            resp.setContentType("text/plain;charset=utf-8");
        }
        chain.doFilter(req, resp);
    }

    @Override
    public void destroy() {
    }
}

解释：

resp.setHeader("Access-Control-Allow-Methods", "POST, GET, PUT, OPTIONS, DELETE");
resp.setHeader("Access-Control-Max-Age", "3600");
resp.setHeader("Access-Control-Allow-Headers", "x-requested-with, Content-Type, Accept, Origin");
resp.setHeader("Access-Control-Allow-Credentials", "true");

这几个配置是为了配置除开ContentType:"application/json"这种方式的跨域访问。

if (type.toUpperCase().equals("OPTIONS") == true) {
    resp.setHeader("Access-Control-Allow-Origin", "*");
    resp.setHeader("Access-Control-Allow-Headers", "content-type");
    resp.setContentType("text/plain;charset=utf-8");
}

这几个代码主要是给ContentType:"application/json"这种方式的跨域访问。因为第一次会发起OPTIONS请求，OPTIONS成功后才会发起第二次请求，所以这种需要特殊处理一下。

以上得代码是经历了真实实践，最后也解决了问题。