不再麻烦后端同学的处理跨域问题

不再麻烦后端同学的处理跨域问题

什么是跨域

每当我们请求后端识别后打开控制台时如果出现了No ‘
Access-Control-Allow-Origin’ header is present on the requesting resource 那么这篇文章可能会帮助到你。

跨域是指在网页中，当一个网页试图去访问不同域名下的资源时（比如发送Ajax请求、使用iframe加载其他网页等），会受到同源策略的限制，从而导致无法正常获取数据的情况。

什么是同源策略

同源指的是协议、域名、端口都相同的两个网址。

例如：如果您要从domain1.com/api 向domain1.com 提出请求，则该请求将通过。

如果提出向另一个域的请求，www.domain2.com/api ，浏览器将阻止请求。

为什么浏览器需要有跨域

浏览器之所以限制跨域访问，是出于安全考虑。

如果浏览器不限制跨域访问，那么攻击者就可以伪造请求，访问用户在其他网站上的敏感信息或执行恶意操作。

举一个简单的例子:

假设受害者在网站A上登录了自己的账户，攻击者在网站B上发布了一个诱骗用户点击的链接，链接指向一个恶意网站C，该网站C使用JavaScript代码向网站A发起了一个跨域请求，偷取了受害者在网站A上的敏感信息（例如cookie、用户名、密码等）。

攻击者可以将以下代码嵌入到网站C中，使用XMLHttpRequest对象向网站A发起跨域请求：

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://www.domain2.com/user-info", true);
xhr.onreadystatechange = function() {
   
  if (xhr.readyState == 4) {
   
    alert(xhr.responseText);
    // 将获取的敏感信息上传到攻击者的服务器上
    // ...
  }
}
xhr.send();

这段代码在网站C中被执行，向网站A发起了一个跨域请求，偷取了受害者在网站A上的敏感信息。攻击者可以将获取的信息上传到自己的服务器上，用于非法用途，例如冒充受害者登录网站A、窃取账户资金等。

所以跨域访问如果可以打破同源策略，会给个人隐私和财产安全带来极大的威胁。为了保护用户的安全，浏览器限制了跨域访问。

如何优雅的处理

每当我们遇到这个问题时，最快的解决方法就是喊后端加一下enable cors，那有没有前端可以自己想办法解决的呢？

有以下三种常用的方式:<