为什么浏览器不能跨域发送 ajax 请求?

本文涉及的产品
.cn 域名,1个 12个月
简介: 欢迎关注前端西瓜哥。

大家好,我是前端西瓜哥。最近在写一个网站的小程序,在代码里面请求了其他域名的接口,然后请求失败了,里面涉及到了浏览器安全策略,就作为今天文章的主题吧。

我们在发送 HTTP 请求时,在一些情况下会失败,并且我们会在控制台看到类似下面的错误信息。

Access to XMLHttpRequest at 'http://localhost:3000/users' from origin 'http://localhost:3004' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

这个其实是 跨域问题,即浏览器默认情况下是不允许在一个网站通过 ajax 请求另一个网站的资源的。比如你在 a.com 通过 ajax 请求 b.com/api/v1/user,浏览器会拦截掉返回的数据,然后报错。

这种机制我们称之为同源策略(Same-Origin Poliy)。

什么叫做同源?

只要两个 url 同时满足下面三个条件,我们就认为它们是同源的。

  • 协议相同
  • host 相同
  • 端口相同

当 url 符合同源规则时,浏览器就不会做拦截。

话说回来,HTTP 请求本身是无关域名。

如果你用过命令行工具比如 cURL,或者是一些可视化的接口测试工具如 Postman,你发现任何请求任何域名都不会出现像浏览器这样被拦截的情况。

但浏览器却在请求的过程中做了限制,这其实是为了解决网页过于开放导致的一些安全问题。

为什么浏览器要有同源策略?

我第一次请求一个其他域名的请求时,被浏览器拦截了,说你跨域了。我一脸懵逼,非常困惑。为什么要拦截一个看起来很普通的请求。我只是客户端和服务端部署在不同域名而已,不要这样搞我吧。

当时的我不是很能理解,后来才慢慢明白了原因,选择了原谅它。

对开发来说,受限的功能很让人糟心,但事关安全,还是勉强可以接受的。(但我还想吐槽微信小程序开发)

没有同源策略为什么危险,我们来举个例子。

假设我们回到了浏览器没有使用同源策略的时代,你登录了一个网站 a.com ,比如银行网站,其中的 cookie 保存着你的用户凭证。

然后你打开一个不知名的展示猫猫可爱图片的网站(其实是攻击者的网站)b.com

打开攻击者网站时,其加载的 JS 脚本向网站 a.com 发送了请求 a.com/transfer?userid=xx&amount=99999。因为没有同源策略,浏览器成功发送了这个请求,并带上对应的 cookies。

于是攻击者有了和你一样的权限,获取到你的敏感信息、转走了你的银行余额、删除了你账号上的重要资料。

你很伤心,浏览器看在心里,于是它整了个同源策略,不是相同域名的请求会被拦截检查一下。

还是想跨域

虽然一般情况下跨域的 ajax 并不安全,但有时候我就是想跨域请求一个值得信赖的域名,有办法吗?

有,用 跨源资源共享(CORS, Cross-Origin Resource Sharing)。

简单来说,就是如果请求其他域名接口后,返回的 HTTP 响应头字段中符合特定的规则,浏览器是不会拦截的,此时我们能够正常地拿到返回的数据,就像同源请求一样。

CORS 这个机制非常复杂,我们明天的文章再详细讲解。

结尾

浏览器为防止攻击者跨域冒充已登录的用户发送涉及敏感信息的请求,使用了同源策略(Same-Origin Poliy)。

这样,当你使用 ajax 请求其他域名下的接口时,浏览器就会没收到返回的数据。

当然浏览器也考虑到有些情况下确实要跨域请求,所以也提供了 跨源资源共享(CORS, Cross-Origin Resource Sharing)机制来让一些跨域请求能够正常获得返回的数据。关于 CORS,我们下一篇文章再说。

相关文章
|
1天前
|
XML 前端开发 JavaScript
|
18天前
|
JSON JavaScript 前端开发
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
《进阶篇第6章:vue中的ajax》包括回顾发送ajax请求方式、vue-cli脚手架配置代理服务器、vue-resource
54 22
|
18天前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
36 18
|
18天前
|
前端开发 JavaScript Java
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
第6章:Vue中的ajax(包含:回顾发送ajax请求方式、vue-cli脚手架配置代理服务器)
47 4
|
25天前
|
Web App开发 JSON 安全
Chrome浏览器的跨域问题
【10月更文挑战第6天】
|
27天前
|
前端开发 JavaScript 数据处理
JQuery 拦截请求 | Ajax 请求拦截
【10月更文挑战第4天】
58 1
|
2月前
|
前端开发
React技术栈-react使用的Ajax请求库实战案例
这篇文章介绍了在React应用中使用Axios和Fetch库进行Ajax请求的实战案例,展示了如何通过这些库发送GET和POST请求,并处理响应和错误。
50 10
React技术栈-react使用的Ajax请求库实战案例
|
2月前
|
前端开发
React技术栈-react使用的Ajax请求库用户搜索案例
这篇文章展示了一个React技术栈中使用Ajax请求库(如axios)进行用户搜索的实战案例,包括React组件的结构、状态管理以及如何通过Ajax请求获取并展示GitHub用户数据。
31 7
React技术栈-react使用的Ajax请求库用户搜索案例
|
2月前
|
JSON JavaScript 前端开发
Jquery常用操作汇总,dom操作,ajax请求
本文汇总了jQuery的一些常用操作,包括DOM元素的选择、添加、移除,表单操作,以及如何使用jQuery发送Ajax请求,涵盖了GET、POST请求和文件上传等常见场景。
|
2月前
|
JSON 资源调度 JavaScript
Vue框架中Ajax请求的实现方式:使用axios库或fetch API
选择 `axios`还是 `fetch`取决于项目需求和个人偏好。`axios`提供了更丰富的API和更灵活的错误处理方式,适用于需要复杂请求配置的场景。而 `fetch`作为现代浏览器的原生API,使用起来更为简洁,但在旧浏览器兼容性和某些高级特性上可能略显不足。无论选择哪种方式,它们都能有效地在Vue应用中实现Ajax请求的功能。
34 4