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

最新推荐文章于 2024-09-05 12:37:36 发布

「已注销」

最新推荐文章于 2024-09-05 12:37:36 发布

阅读量136

点赞数

文章标签：服务器 javascript 前端

本文链接：https://blog.csdn.net/park33/article/details/130926134

版权

本文介绍了跨域问题及其产生的原因——同源策略，详细讲解了浏览器为何实施这一策略。接着，文章探讨了前端处理跨域的三种方法：JSONP、设置代理服务器以及使用Webpack devserver，并通过实例说明了每种方法的实现。最后，作者分享了在实践过程中遇到的坑，提醒读者在处理跨域时需要注意客户端请求自身服务器的端口问题。

摘要由CSDN通过智能技术生成

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

什么是跨域

每当我们请求后端识别后打开控制台时如果出现了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();