• 解决前后端跨域问题No‘Access-Control-Allow-Origin‘...

    实际工作中遇到了，在此做个笔记，希望能够帮助到遇到此问题的猿友们！！！

    目录

    问题场景

    ​编辑此时作者后端代码为：

    自定义过滤器：

    WebMvcConfig配置文件： 注入自定义过滤器

    解决方法

    1.后端代码中设置解决跨域代码

    2.使用Nginx进行解决跨域

     3.设置Access-Control-Allow-Origin允许多域名访问

    方式一：设置允许多域名访问最简单的方法是使用通配符。

     方式二：使用数组过滤的方式 

    问题场景

            前端访问后端接口从页面控制台Network中看到接口报错，请求方法为OPTIONS，状态值为302；

            页面控制台中报错：No 'Access-Control-Allow-Origin' header is present on the requested resource

    此时作者后端代码为：

     

    自定义过滤器：

    1. import org.slf4j.Logger;
    2. import org.slf4j.LoggerFactory;
    3.  
    4. import javax.servlet.*;
    5. import javax.servlet.http.HttpServletResponse;
    6. import java.io.IOException;
    7.  
    8. public class MyFilterConfig implements Filter {
    9.  
    10.     private Logger logger= LoggerFactory.getLogger(getClass());
    11.  
    12.    @Override
    13.     public void init(FilterConfig filterConfig) throws ServletException {
    14.         logger.info("过滤器初始化");
    15.     }
    16.  
    17.     @Override
    18.     public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
    19.          HttpServletResponse httpResponse = (HttpServletResponse) servletResponse;
    20.         //*表示允许所有域名跨域
    21.         httpResponse.setHeader("Access-Control-Allow-Origin","*");
    22.         httpResponse.setHeader("Access-Control-Allow-Credentials", "true");
    23.         httpResponse.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");
    24.         httpResponse.setHeader("Access-Control-Max-Age", "5000");
    25.         httpResponse.setHeader("Access-Control-Allow-Headers", "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With,Authorization,Token");
    26.         filterChain.doFilter(servletRequest, servletResponse);
    27.  
    28.     }
    29. }

    WebMvcConfig配置文件： 注入自定义过滤器

    1. import org.springframework.beans.factory.annotation.Value;
    2. import org.springframework.boot.web.servlet.FilterRegistrationBean;
    3. import org.springframework.context.annotation.Bean;
    4. import org.springframework.context.annotation.Configuration;
    5. import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
    6. import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
    7.  
    8. import java.util.Arrays;
    9.  
    10. @Configuration
    11. public class MvcConfig implements WebMvcConfigurer {
    12.  
    13.     @Value("${file.fileMapPath}")
    14.     private String fileMapPath;
    15.  
    16.     /**
    17.      * 自定义过滤器,解决前后端分离跨域问题
    18.      * @return
    19.      */
    20.     @Bean
    21.     public FilterRegistrationBean myFilter(){
    22.         FilterRegistrationBean filterRegistrationBean = new FilterRegistrationBean();
    23.         //传入自己创建的filter
    24.         filterRegistrationBean.setFilter(new MyFilterConfig());
    25.         //设置拦截路径
    26.         filterRegistrationBean.setUrlPatterns(Arrays.asList("/*"));
    27.         return filterRegistrationBean;
    28.     }
    29.  
    30. }

    解决方法

    1.后端代码中设置解决跨域代码

    方式一：

    1.  
    2. import org.slf4j.Logger;
    3. import org.slf4j.LoggerFactory;
    4.  
    5. import javax.servlet.*;
    6. import javax.servlet.http.HttpServletRequest;
    7. import javax.servlet.http.HttpServletResponse;
    8. import java.io.IOException;
    9.  
    10. public class MyFilterConfig implements Filter {
    11.  
    12.     private Logger logger = LoggerFactory.getLogger(getClass());
    13.  
    14.     @Override
    15.     public void init(FilterConfig filterConfig) throws ServletException {
    16.         logger.info("过滤器初始化");
    17.     }
    18.  
    19.     @Override
    20.     public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
    21.         HttpServletResponse response = (HttpServletResponse) servletResponse;
    22.         HttpServletRequest request = (HttpServletRequest) servletRequest;
    23.         //*表示允许所有域名跨域
    24.         logger.info("进入过滤器");
    25.         String origin = request.getHeader("Origin");
    26.         response.setHeader("Access-Control-Allow-Origin", origin);
    27.         response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");
    28.         response.setHeader("Access-Control-Max-Age", "5000");
    29.         response.setHeader("Access-Control-Allow-Headers", "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With, Authorization, Token");
    30.         response.setHeader("Access-Control-Allow-Credentials", "true");
    31.         String method = request.getMethod();
    32.         if (method.equalsIgnoreCase("OPTIONS")) {
    33.             servletResponse.getOutputStream().write("Success".getBytes("utf-8"));
    34.         } else {
    35.             filterChain.doFilter(request, response);
    36.         }
    37.     }
    38.  
    39.     @Override
    40.     public void destroy() {
    41.  
    42.     }
    43. }

    方式二：response.setHeader("Access-Control-Allow-Origin", "*");

    1.  
    2. import org.slf4j.Logger;
    3. import org.slf4j.LoggerFactory;
    4.  
    5. import javax.servlet.*;
    6. import javax.servlet.http.HttpServletRequest;
    7. import javax.servlet.http.HttpServletResponse;
    8. import java.io.IOException;
    9.  
    10. public class MyFilterConfig implements Filter {
    11.  
    12.     private Logger logger = LoggerFactory.getLogger(getClass());
    13.  
    14.     @Override
    15.     public void init(FilterConfig filterConfig) throws ServletException {
    16.         logger.info("过滤器初始化");
    17.     }
    18.  
    19.     @Override
    20.     public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
    21.         HttpServletResponse response = (HttpServletResponse) servletResponse;
    22.         HttpServletRequest request = (HttpServletRequest) servletRequest;
    23.         //*表示允许所有域名跨域
    24.         logger.info("进入过滤器");
    25.         response.setHeader("Access-Control-Allow-Origin", "*");
    26.         response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");
    27.         response.setHeader("Access-Control-Max-Age", "5000");
    28.         response.setHeader("Access-Control-Allow-Headers", "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With, Authorization, Token");
    29.         response.setHeader("Access-Control-Allow-Credentials", "true");
    30.         String method = request.getMethod();
    31.         if (method.equalsIgnoreCase("OPTIONS")) {
    32.             servletResponse.getOutputStream().write("Success".getBytes("utf-8"));
    33.         } else {
    34.             filterChain.doFilter(request, response);
    35.         }
    36.     }
    37.  
    38.     @Override
    39.     public void destroy() {
    40.  
    41.     }
    42. }

    2.使用Nginx进行解决跨域

    例：前端工程部署时使用浏览器默认端口：80 。后端工程端口为 8080 。nginx 监听端口 8082 。

    前端请求后端 URL 为：http://  nginx所在服务器 IP : 8082 。

    前端工程请求 8082，nginx 收到请求再转发到实际服务，取得数据，并最终再返回。
    （nginx 所在服务器也就是代理服务器，可以和后端服务器为同一主机）

    在 nginx 配置文件中设置为：

    端口占用情况如下：红框是 nginx 、黄框是前端工程、蓝框是后端工程。

     3.设置Access-Control-Allow-Origin允许多域名访问

    方式一：设置允许多域名访问最简单的方法是使用通配符。

    注：这种方式允许所有域名都可以访问，并不安全，而且这种方式浏览器不能携带cookie信息（携带cookie信息只能使用真实域名，如下面第二中方式）。这种方式只推荐在不带cookie信息的开发中测试使用。

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

     方式二：使用数组过滤的方式 

    1.  
    2. import org.slf4j.Logger;
    3. import org.slf4j.LoggerFactory;
    4.  
    5. import javax.servlet.*;
    6. import javax.servlet.http.HttpServletRequest;
    7. import javax.servlet.http.HttpServletResponse;
    8. import java.io.IOException;
    9. import java.util.Arrays;
    10. import java.util.HashSet;
    11. import java.util.Set;
    12.  
    13. public class MyFilterConfig implements Filter {
    14.  
    15.     private Logger logger = LoggerFactory.getLogger(getClass());
    16.  
    17.     @Override
    18.     public void init(FilterConfig filterConfig) throws ServletException {
    19.         logger.info("过滤器初始化");
    20.     }
    21.  
    22.     @Override
    23.     public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
    24.         HttpServletResponse response = (HttpServletResponse) servletResponse;
    25.         HttpServletRequest request = (HttpServletRequest) servletRequest;
    26.         //*表示允许所有域名跨域
    27.         logger.info("进入过滤器");
    28.         // 设置允许多个域名请求
    29.         String[] allowDomains = {"http://www.toheart.xin","http://192.168.11.213:8080","http://localhost:8080"};
    30.         Set allowOrigins = new HashSet(Arrays.asList(allowDomains));
    31.         String origin = request.getHeader("Origin");
    32.         if(allowOrigins.contains(origin)){
    33.             //设置允许跨域的配置
    34.             // 这里填写你允许进行跨域的主机ip（正式上线时可以动态配置具体允许的域名和IP）
    35.             response.setHeader("Access-Control-Allow-Origin", origin);
    36.         }
    37.         response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");
    38.         response.setHeader("Access-Control-Max-Age", "5000");
    39.         response.setHeader("Access-Control-Allow-Headers", "Origin, No-Cache, X-Requested-With, If-Modified-Since, Pragma, Last-Modified, Cache-Control, Expires, Content-Type, X-E4M-With, Authorization, Token");
    40.         response.setHeader("Access-Control-Allow-Credentials", "true");
    41.         String method = request.getMethod();
    42.         if (method.equalsIgnoreCase("OPTIONS")) {
    43.             servletResponse.getOutputStream().write("Success".getBytes("utf-8"));
    44.         } else {
    45.             filterChain.doFilter(request, response);
    46.         }
    47.     }
    48.  
    49.     @Override
    50.     public void destroy() {
    51.  
    52.     }
    53. }

    期待大家的三连击，你们的支持是我的动力。加油，猿友们！！

  • 相关阅读:
    【012】wireshark抓包分析libpq和postmaster之间的通信
    WebShell后门检测与WebShell箱子反杀
    JVM原理学习笔记总结
    Azure AD Domain Service（二）为域服务中的机器配置 Azure File Share 磁盘共享
    C笔记：引用调用，通过指针传递
    leetcode 1222. 可以攻击国王的皇后(每日一题)
    图像信号处理板设计原理图：2-基于6U VPX的双TMS320C6678+Xilinx FPGA K7 XC7K420T的图像信号处理板
    浅谈结构化数据、非结构化数据，关系数据库、非关系数据库
    手把手教你打造美观实用的家居微信小程序
    手撕各种排序
  • 原文地址：https://blog.csdn.net/weixin_43552143/article/details/125414510