跨域问题及解决方案

跨域问题及解决方案


  
一、什么是跨域问题

跨域问题是指欣赏器基于安全性的同源计谋，阻止网页向不同源（域名、协议或端口不同的服务器）请求资源时所遇到的限定。这个问题紧张在前端开发中出现，当欣赏器拒绝执行前端页面发出的跨域请求时，开发者就会遇到跨域问题。
同源计谋：
同源计谋（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设置相应头信息，来实现跨域访问控制，这种方式比力灵活，但相对比力繁琐。

1. @Component
2. public class CorsFilter implements Filter {
4.     @Override
5.     public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) throws IOException, ServletException {
6.         HttpServletResponse response = (HttpServletResponse) res;
7.         HttpServletRequest request = (HttpServletRequest) req;
8.         response.setHeader("Access-Control-Allow-Origin", "http://localhost:8080");
9.         response.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
10.         response.setHeader("Access-Control-Allow-Credentials", "true");
11.         response.setHeader("Access-Control-Max-Age", "3600");
12.         chain.doFilter(req, res);
13.     }
14. }

复制代码

解决方案明白图：

使用署理服务器解决

使用前端开发服务器（如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获取对应资源后再返回给客户端

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

复制代码

解决方案明白图：

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