• 跨域的实例


      一、

       在后台创建一个filter过滤器和创建一个servlet、配置web.xml

     二 、HttpCorsFilter类中

     1 package filter;
     2 
     3 import javax.servlet.*;
     4 import javax.servlet.http.HttpServletRequest;
     5 import javax.servlet.http.HttpServletResponse;
     6 import java.io.IOException;
     7 
     8 public class HttpCorsFilter implements Filter {
     9     String[] allowOriginArray = null;
    10 
    11     @Override
    12     public void init(FilterConfig filterConfig) {
    13         //获取web.xml中的数据
    14         String initParameter = filterConfig.getInitParameter("allow-Origin");
    15         //
    16         if (initParameter != null) {
    17             if (initParameter.equals("*")) {
    18                 //如果是星号直接添加到数组中
    19                 allowOriginArray = new String[]{"*"};
    20             } else {
    21                 //不是星号直接分割,然后添加到数组中
    22                 allowOriginArray = initParameter.split(",");
    23             }
    24         }
    25     }
    26 
    27     @Override
    28     public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
    29         HttpServletRequest req = (HttpServletRequest) servletRequest;
    30         HttpServletResponse resp = (HttpServletResponse) servletResponse;
    31 
    32         //定义一个boolean类型变量
    33         boolean isOrigin = false;
    34         //如果origin字段存在,allowOriginArray具有 * 或者具有 origin;然后增加响应字段
    35         String origin = req.getHeader("Origin");
    36         if (origin != null && !origin.isEmpty()) {
    37 
    38             for (String s : allowOriginArray) {
    39                 //
    40                 if (s.equals("*") || s.equals(origin)) {
    41                     isOrigin = true;
    42                     break;
    43                 }
    44             }
    45 
    46             if (isOrigin) {
    47                 resp.setHeader("Access-Control-Allow-Origin", origin);
    48             }
    49         }
    50         filterChain.doFilter(req, resp);
    51     }
    52 
    53     @Override
    54     public void destroy() {
    55 
    56     }
    57 }

    三、FilterServlet中

     1 package servlet;
     2 
     3 import javax.servlet.ServletException;
     4 import javax.servlet.annotation.WebServlet;
     5 import javax.servlet.http.HttpServlet;
     6 import javax.servlet.http.HttpServletRequest;
     7 import javax.servlet.http.HttpServletResponse;
     8 import java.io.IOException;
     9 import java.io.PrintWriter;
    10 
    11 @WebServlet("/test")
    12 public class FilterServlet extends HttpServlet {
    13     @Override
    14     protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
    15 
    16         PrintWriter writer = resp.getWriter();
    17         writer.write("hello");
    18     }
    19 }

    四、 web.xml中

     1 <?xml version="1.0" encoding="UTF-8"?>
     2 <web-app xmlns="http://xmlns.jcp.org/xml/ns/javaee"
     3          xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
     4          xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_4_0.xsd"
     5          version="4.0">
     6 <!--第一种方式
     7     <filter>
     8         <filter-name>CorsFilter</filter-name>
     9         <filter-class>filter.CorsFilter</filter-class>
    10     </filter>
    11     <filter-mapping>
    12         <filter-name>CorsFilter</filter-name>
    13         <url-pattern>/test</url-pattern>
    14     </filter-mapping>-->
    15     <!--
    16         第二种方式
    17     -->
    18     <filter>
    19         <filter-name>HttpCorsFilter</filter-name>
    20         <filter-class>filter.HttpCorsFilter</filter-class>
    21         <init-param>
    22             <param-name>allow-Origin</param-name>
    23             <param-value>*</param-value> <!-- 用星号是表示所以的网访问都有可以-->
    24             <!--表示只能是以下的网站能访问到你的 Servlet-->
    25            <!-- <param-value> http://127.0.0.1:8080,http://192.168.4.129:8080</param-value>-->
    26         </init-param>
    27     </filter>
    28     <filter-mapping>
    29         <filter-name>HttpCorsFilter</filter-name>
    30         <url-pattern>/test</url-pattern>
    31     </filter-mapping>
    32 </web-app>

    五、HTML的代码

     1 <!DOCTYPE html>
     2 <html>
     3     <head>
     4         <meta charset="utf-8" />
     5         <meta name="viewport" content="width=device-width, initial-scale=1">
     6         <title>跨域</title>
     7     </head>
     8     <body>
     9         <button onclick="send()">跨域发送</button>
    10         <script src="axios.js"></script>
    11         <script>
    12             function send() {
    13                 axios({
    14                     method: 'get',
    15                     url: 'http://localhost:8080/test'
    16                 }).then(res => console.log(res));
    17             }
    18         </script>
    19     </body>
    20 </html>

    六、显示的结果

  • 相关阅读:
    一个前端框架应该有的一些公共函数
    前端开发避免bug注意事项
    angular中iframe的ng-src属性
    jquery上传base64位图片
    [Luogu]P2302 loidc,跑起来
    情书
    SA学习笔记
    关于GCD的证明
    文本生成器(AC自动机 + DP)
    AC自动机--速成版
  • 原文地址:https://www.cnblogs.com/YouAreABug/p/10026306.html
Copyright © 2020-2023  润新知