彻底搞懂 Ajax 跨域访问:3 种解决方案

如果你了解过 Web 开发,那么你应该听说过 Ajax 跨域访问问题,如果你还稍微多了解了一点,那么,你应该知道,这并非开发本身有问题,它仅仅只是浏览器为了安全起见,设置的一个门槛而已。

Ajax 跨域访问,并非什么技术难点,所以绝大多数 Web 开发者,甚至直接都忽略它了,因为网上到处都有 Ajax 跨域的解决方案,例如 JSONP,但是,你真的了解那些解决方案的背后的原理吗?

什么是跨域访问问题

前台通过 Ajax 异步请求的方式,获取「非同域」下的后台资源,而被浏览器拦截报错,称之为:Ajax 跨域访问问题。那么,浏览器为什么会阻止你在 A 域下异步访问 B 域下的数据呢?为了安全。

当然,浏览器并非啥都「多管闲事」,你要同时满足两个条件,请求资源时,它才会阻止你。

  1. 非同域。如果是在同域(前后台不分离的项目)中,前台请求,后台响应,浏览都是不会管你的
  2. Ajax 异步请求(xhr 类型)。即使是在非同域,例如使用第三方图片资源、css 资源以及 js 资源,浏览器也是不会干涉的

说了这么多,不够直观,写个例子。
PS. 后台代码采用 Node 编写,如不了解 Node,不用担心,重点关注 Web 请求部分即可。

因为要模拟跨域,所以我们需要在本地启动,端口不一样的两个 Web 服务器,一个称之为「我方」,端口使用 8080;一个称之为「敌方」,端口使用 3000 。


本文为付费 Chat,链接地址:https://gitbook.cn/gitchat/activity/5c9b35128557e42aec4bc5c7


Comments
Write a Comment