• 什么是跨域

    原文链接：什么是跨域 – 编程屋

    目录

    1 同源策略

    2 什么是跨域

    3 如何解决跨域

    3.1 配置CROS

     3.2 Nginx解决跨域问题

    1 同源策略

            跨域是指浏览器不能执行其他网站的脚本，是由浏览器的同源策略造成的，是浏览器加的安全限制。同源是指，域名，协议，端口均相同

    2 什么是跨域

    当请求的url和当前页面的url在域名、协议、端口三者之间有一个不相同就会产生跨域问题。

    当前页面url被请求url是否跨域跨域原因
    http://www.baidu.com/http://www.baidu.com/index.html否域名、协议、端口都相同
    http://www.baidu.com/https://www.baidu.com/index.html是协议不同（http/https）
    http://www.baidu.com/http://www.test.com/是主域名不同（baidu/test）
    http://www.baidu.com/http://blog.baidu.com/是子域名不同（baidu/test）
    http://www.baidu.com:8080/http://www.baidu.com:7890/是端口不同（8080/7890）

    3 如何解决跨域

    这里介绍平时最常用的两种跨域解决方式 1配置CROS 2配置nginx

    没有进行配置之前的代码：

    前端代码：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <title>cors</title>
    6.     <script type="text/javascript" src="jquery-3.5.0.min.js"></script>
    7.     <script type="text/javascript">
    8.         $(function () {
    9.             $("#cors-btn1").click(function () {
    10.                 $.ajax({
    11.                     url: "http://localhost:9999/test/cros", //此时9999是后端服务器端口号
    12.                     success: function (data) {
    13.                         console.log(JSON.stringify(data));
    14.                     }
    15.                 });
    16.             });
    17.  
    18.         })
    19.     </script>
    20. </head>
    21. <body>
    22. <button id="cors-btn1">跨域测试test1</button>
    23. </body>
    24. </html>

    后端代码：

    1. @RestController
    2. public class LoginController {
    3.  
    4.     @GetMapping("/test/cros")
    5.     public String testCros(){
    6.         return "测试解决跨域问题";
    7.     }
    8. }

    直接在idea中打开浏览器访问：

     结果：出现跨域问题如下

    3.1 配置CROS

    前端代码不变、后端代码配置CROS，设置一个过滤器。

    配置过滤器：

    1. package com.liubujun.springbootinterceptor.filter;
    2.  
    3.  
    4.  
    5.  
    6.  
    7. import org.springframework.http.HttpStatus;
    8. import org.springframework.web.bind.annotation.RequestMethod;
    9.  
    10.  
    11. import javax.servlet.*;
    12. import javax.servlet.annotation.WebFilter;
    13. import javax.servlet.http.HttpServletRequest;
    14. import javax.servlet.http.HttpServletResponse;
    15. import java.io.IOException;
    16.  
    17. /**
    18.  * @Author: liubujun
    19.  * @Date: 2022/10/16 19:26
    20.  */
    21.  
    22. @WebFilter("/*")
    23. public class MyFilterOne implements Filter {
    24.  
    25.  
    26.     /**
    27.      * web应用启动时，web服务器将创建Filter的实例对象，并调用init方法，读取web.xml的配置，完成对象的初始化功能，
    28.      * 从而为后续的用户请求做好拦截的准备工作（filter对象只会创建一次，init方法也只会执行一次，开发人员通过init的参数，
    29.      * 可或得代表当前filter配置信息的FilterConfig对象）
    30.      * @param filterConfig
    31.      * @throws ServletException
    32.      */
    33.     @Override
    34.     public void init(FilterConfig filterConfig) throws ServletException {
    35.  
    36.     }
    37.  
    38.     /**
    39.      * 这个方法完成实际的过滤操作，当客户请求访问与过滤器相关联的URL的时候，Servlet过滤器将先执行doFilter方法，FilterChain参数用于访问后续过滤器
    40.      * @param servletRequest
    41.      * @param servletResponse
    42.      * @param filterChain
    43.      * @throws IOException
    44.      * @throws ServletException
    45.      */
    46.     @Override
    47.     public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
    48.         System.out.println("我是过滤器，我进来了");
    49.  
    50.         HttpServletResponse httpResponse = (HttpServletResponse) servletResponse;
    51.         HttpServletRequest request = (HttpServletRequest) servletRequest;
    52.         httpResponse.addHeader("Access-Control-Allow-Origin", "*");
    53.         httpResponse.addHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
    54.         httpResponse.addHeader("Access-Control-Max-Age", "3600");
    55.  
    56.         httpResponse.addHeader("Access-Control-Allow-Headers", request.getHeader("Access-Control-Request-Headers"));
    57.         httpResponse.addHeader("Access-Control-Allow-Credentials", "true");
    58.         if (request.getMethod().equals(RequestMethod.OPTIONS.name())) {
    59.             httpResponse.setStatus(HttpStatus.OK.value());
    60.             return;
    61.         }
    62.         filterChain.doFilter(servletRequest, servletResponse);
    63.     }
    64.  
    65.     /**
    66.      * filter创建后会保存在内存中，当web应用移除或者服务器停止时才销毁，该方法在Filter的生命周期中仅执行一次，在这个方法中，可以释放过滤器使用的资源
    67.      */
    68.     @Override
    69.     public void destroy() {
    70.  
    71.     }
    72. }

    启动类：

    1. @SpringBootApplication
    2. @ServletComponentScan
    3. public class SpringbootInterceptorApplication {
    4.  
    5.     public static void main(String[] args) {
    6.         SpringApplication.run(SpringbootInterceptorApplication.class, args);
    7.     }
    8. }

    直接在浏览器打开：

     结果没有出现跨域问题

     3.2 Nginx解决跨域问题

    打开自己nginx下的nginx.conf文件，向其中加入如下代码

    1.     server {
    2.         listen       8000;
    3.         server_name  localhost;
    4.         # / 表示匹配路径为/的url
    5.         location / {
    6.            proxy_pass http://localhost:9999;
    7.         }
    8.  
    9.         # /user 表示访问以/test 开头 的地址 如/testname,/test/find等
    10.         location /test {
    11.            proxy_pass http://localhost:9999;
    12.         }
    13.  
    14.     }

    以上只是部分内容，为了维护方便，本文已迁移到新地址：什么是跨域 – 编程屋

  • 相关阅读:
    mysql 自定义函数create function
    【Express】登录鉴权 JWT
    qt中toLocal8Bit和toUtf8()有什么区别
    2022年深圳技能大赛—大数据技术应用职业技能竞赛圆满闭幕
    vue中v-model应用于表单元素
    C++广搜例题+代码+讲解（2）
    Bootstrap的徽章样式设计,徽章常用作作为显示未读内容或动态计数内容
    Codeforces Round #818 (Div. 2) E. Madoka and The Best University(gcd性质+莫比乌斯反演φ)
    【AI视野·今日NLP 自然语言处理论文速览 第三十五期】Mon, 18 Sep 2023
    民安智库（第三方市场调研公司）哪家残疾人服务满意度调研公司比较专业
  • 原文地址：https://blog.csdn.net/qq_50652600/article/details/123539278