当前位置：首页 > news >正文

什么是跨域

news 来源：原创 2025/5/2 21:18:33

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

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

前端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>cors</title>
    <script type="text/javascript" src="jquery-3.5.0.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#cors-btn1").click(function () {
                $.ajax({
                    url: "http://localhost:9999/test/cros", //此时9999是后端服务器端口号
                    success: function (data) {
                        console.log(JSON.stringify(data));
                    }
                });
            });

        })
    </script>
</head>
<body>
<button id="cors-btn1">跨域测试test1</button>
</body>
</html>

后端代码：

@RestController
public class LoginController {

    @GetMapping("/test/cros")
    public String testCros(){
        return "测试解决跨域问题";
    }
}

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

结果：出现跨域问题如下

3.1 配置CROS

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

配置过滤器：

package com.liubujun.springbootinterceptor.filter;





import org.springframework.http.HttpStatus;
import org.springframework.web.bind.annotation.RequestMethod;


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

/**
 * @Author: liubujun
 * @Date: 2022/10/16 19:26
 */

@WebFilter("/*")
public class MyFilterOne implements Filter {


    /**
     * web应用启动时，web服务器将创建Filter的实例对象，并调用init方法，读取web.xml的配置，完成对象的初始化功能，
     * 从而为后续的用户请求做好拦截的准备工作（filter对象只会创建一次，init方法也只会执行一次，开发人员通过init的参数，
     * 可或得代表当前filter配置信息的FilterConfig对象）
     * @param filterConfig
     * @throws ServletException
     */
    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    /**
     * 这个方法完成实际的过滤操作，当客户请求访问与过滤器相关联的URL的时候，Servlet过滤器将先执行doFilter方法，FilterChain参数用于访问后续过滤器
     * @param servletRequest
     * @param servletResponse
     * @param filterChain
     * @throws IOException
     * @throws ServletException
     */
    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        System.out.println("我是过滤器，我进来了");

        HttpServletResponse httpResponse = (HttpServletResponse) servletResponse;
        HttpServletRequest request = (HttpServletRequest) servletRequest;
        httpResponse.addHeader("Access-Control-Allow-Origin", "*");
        httpResponse.addHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        httpResponse.addHeader("Access-Control-Max-Age", "3600");

        httpResponse.addHeader("Access-Control-Allow-Headers", request.getHeader("Access-Control-Request-Headers"));
        httpResponse.addHeader("Access-Control-Allow-Credentials", "true");
        if (request.getMethod().equals(RequestMethod.OPTIONS.name())) {
            httpResponse.setStatus(HttpStatus.OK.value());
            return;
        }
        filterChain.doFilter(servletRequest, servletResponse);
    }

    /**
     * filter创建后会保存在内存中，当web应用移除或者服务器停止时才销毁，该方法在Filter的生命周期中仅执行一次，在这个方法中，可以释放过滤器使用的资源
     */
    @Override
    public void destroy() {

    }
}

启动类：

@SpringBootApplication
@ServletComponentScan
public class SpringbootInterceptorApplication {

    public static void main(String[] args) {
        SpringApplication.run(SpringbootInterceptorApplication.class, args);
    }
}

直接在浏览器打开：

结果没有出现跨域问题

3.2 Nginx解决跨域问题

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

    server {
        listen       8000;
        server_name  localhost;
        # / 表示匹配路径为/的url
        location / {
           proxy_pass http://localhost:9999;
        }
 
        # /user 表示访问以/test 开头 的地址 如/testname,/test/find等
        location /test {
           proxy_pass http://localhost:9999;
        }
 
    }

然后启动nginx：