IT评测·应用市场-qidao123.com技术社区

标题: 跨域问题及解决方案 [打印本页]

作者: 火影 时间: 2024-9-8 21:08
标题: 跨域问题及解决方案
跨域问题及解决方案

一、什么是跨域问题

跨域问题是指欣赏器基于安全性的同源计谋，阻止网页向不同源（域名、协议或端口不同的服务器）请求资源时所遇到的限定。这个问题紧张在前端开发中出现，当欣赏器拒绝执行前端页面发出的跨域请求时，开发者就会遇到跨域问题。
同源计谋：
同源计谋（Same-Origin Policy）是欣赏器的一种安全机制，用来防止不同源之间的恶意活动。所谓"同源"，是指协议、域名、端口三者都雷同。只有当这三者完全一致时，才被认为是同源。
举个例子：
如果前端页面的URL是http://example.com:80

同源：http://example.com:80
跨域

：

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

二、跨域问题的产生

同源计谋限定：
- 协议不同: 例如，前端页面是通过HTTP访问的，而后端API是通过HTTPS访问的。
- 域名不同: 例如，前端页面的域名是www.example.com，而后端API的域名是api.example.com。
- 端口不同: 例如，前端页面通过http://localhost:3000访问，而后端API运行在http://localhost:8080。
只要协议、域名、端口任意一个不同，就会触发欣赏器的同源计谋，导致跨域问题。
欣赏器的安全计谋：欣赏器为了防止CSRF（跨站请求伪造）等攻击，默认禁止跨域请求的资源访问。例如，前端通过JavaScript中的XMLHttpRequest或Fetch API请求后端资源时，如果后端和前端不在同一个域下，就会触发跨域问题。

跨域问题的产生：

三、跨域问题的常见场景

前后端分离架构：在当代Web开发中，前端和后端通常是分离开发的，前端应用可能摆设在一个服务器上，而后端API服务摆设在另一个服务器上，这种环境下，跨域问题很常见。
微服务架构：在微服务架构中，不同服务可能运行在不同的域名或端口下，而前端需要请求多个服务的API，这时也会出现跨域问题。
开发环境：在开发环境中，前端和后端经常运行在不同的端口下，例如，前端在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':''} //可要可不要看具体需求
}
}
}
}

复制代码

解决方案明白图：

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

欢迎光临 IT评测·应用市场-qidao123.com技术社区 (https://dis.qidao123.com/)