跨域问题及解决方案

跨域问题及解决方案

一、什么是跨域问题

跨域问题是指浏览器基于安全性的同源策略，阻止网页向不同源（域名、协议或端口不同的服务器）请求资源时所遇到的限制。这个问题主要在前端开发中出现，当浏览器拒绝执行前端页面发出的跨域请求时，开发者就会遇到跨域问题。

同源策略：

同源策略（Same-Origin Policy）是浏览器的一种安全机制，用来防止不同源之间的恶意行为。所谓"同源"，是指协议、域名、端口三者都相同。只有当这三者完全一致时，才被认为是同源。

举个例子：

如果前端页面的URL是http://example.com:80

• 同源：http://example.com:80

• 跨域

：

• https://example.com:80（协议不同）
• http://example.org:80（域名不同）
• http://example.com:8080（端口不同

二、跨域问题的产生

1. 同源策略限制：

   • 协议不同: 例如，前端页面是通过HTTP访问的，而后端API是通过HTTPS访问的。
   • 域名不同: 例如，前端页面的域名是www.example.com，而后端API的域名是api.example.com。
   • 端口不同: 例如，前端页面通过http://localhost:3000访问，而后端API运行在http://localhost:8080。

   只要协议、域名、端口任意一个不同，就会触发浏览器的同源策略，导致跨域问题。

2. 浏览器的安全策略： 浏览器为了防止CSRF（跨站请求伪造）等攻击，默认禁止跨域请求的资源访问。例如，前端通过JavaScript中的XMLHttpRequest或Fetch API请求后端资源时，如果后端和前端不在同一个域下，就会触发跨域问题。

跨域问题的产生：

三、跨域问题的常见场景

1. 前后端分离架构： 在现代Web开发中，前端和后端通常是分离开发的，前端应用可能部署在一个服务器上，而后端API服务部署在另一个服务器上，这种情况下，跨域问题很常见。
2. 微服务架构： 在微服务架构中，不同服务可能运行在不同的域名或端口下，而前端需要请求多个服务的API，这时也会出现跨域问题。
3. 开发环境： 在开发环境中，前端和后端常常运行在不同的端口下，例如，前端在localhost:3000，后端在localhost:8080，此时会产生跨域问题。

四、跨域问题的解决

使用过滤器解决

通过自定义Filter设置响应头信息，来实现跨域访问控制，这种方式比较灵活，但相对比较繁琐。

@Component
public class CorsFilter implements Filter {

    @Override
    public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) res;
        HttpServletRequest request = (HttpServletRequest) req;
        response.setHeader("Access-Control-Allow-Origin", "http://localhost:8080");
        response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Max-Age", "3600");
        chain.doFilter(req, res);
    }
}

解决方案理解图：

使用代理服务器解决

使用前端开发服务器（如webpack-dev-server）或Nginx代理请求，将请求转发给后端服务器，从而避开浏览器的同源策略限制。

通过nginx或Node.js代理后，获取url为http//localhost:8081/xxx.html的html页面
获取url 为http://localhost:8081/api/xxx页面内的数据 ,相同的http://localhost:8081并不会引发跨域问题，只不过带api前缀的被Node.js或ngiinx代理了，向http://localhost:8080/xxx获取对应资源后再返回给客户端

module.exports = {
    devServer:{
        proxy:{
            '/api':{//匹配所有以'/api'开头的请求路径
                target:'http://localhost:8081',//代理目标的基础路径
                changeOrigin:true, //可要可不要看具体需求
                pathRewrite:{'^/api':''}  //可要可不要看具体需求
            }   
                 }
    }
}

解决方案理解图：