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

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

我们在发送 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，我们下一篇文章再说。

前端西瓜哥

坚持日更原创，分享前端知识。

102篇原创内容

公众号

本文使用 文章同步助手 同步