跨域问题及解决方案

跨域问题及解决方案

文章目录

一、什么是跨域问题

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

同源策略

同源策略 (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中的XMLHttpRequestFetch API请求后端资源时,如果后端和前端不在同一个域下,就会触发跨域问题。

跨域问题的产生:

三、跨域问题的常见场景

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

四、跨域问题的解决

使用过滤器解决

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

java 复制代码
@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获取对应资源后再返回给客户端

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

解决方案理解图:

相关推荐
夜阳朔几秒前
Conda环境激活失效问题
人工智能·后端·python
白仑色23 分钟前
Spring Boot 多环境配置详解
java·spring boot·后端·微服务架构·配置管理
懒斌23 分钟前
linux驱动程序
后端
超级小忍25 分钟前
在 Spring Boot 中优化长轮询(Long Polling)连接频繁建立销毁问题
java·spring boot·后端
David爱编程29 分钟前
Java 中 Integer 为什么不是万能的 int 替代品?
java·后端
阿宝想会飞30 分钟前
easyExcel多出大量数据方法
后端
自由的疯31 分钟前
基于 Java POI 实现动态列 Excel 导出的通用方法
后端
自由的疯31 分钟前
Java 利用 Apache POI 实现多模板 Word 文档生成(补充:模板文档为复杂表单的处理办法)
后端
平平无奇的开发仔34 分钟前
# Java 序列化与 Jackson 序列化机制对比
后端
ykuaile_h841 分钟前
Go 编译报错排查:vendor/golang.org/x/crypto/cryptobyte/asn1 no Go source files
后端·golang