跨域问题及解决方案
一、什么是跨域问题
跨域问题是指浏览器基于安全性的同源策略,阻止网页向不同源(域名、协议或端口不同的服务器)请求资源时所遇到的限制。这个问题主要在前端开发中出现,当浏览器拒绝执行前端页面发出的跨域请求时,开发者就会遇到跨域问题。
同源策略:
同源策略(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':''} //可要可不要看具体需求
}
}
}
}
解决方案理解图: