进阶13 JSONP 和 跨域

1. 跨域和同源

首先来看摘自MDN上对于跨域,较为标准的解释:

当一个资源从与该资源本身所在的服务器不同的域或端口请求一个资源时,资源会发起一个跨域 HTTP 请求
比如,站点 http://domain-a.com 的某 HTML 页面通过 的 src 请求 http://domain-b.com/image.jpg。网络上的许多页面都会加载来自不同域的CSS样式表,图像和脚本等资源。
出于安全考虑,浏览器会限制从脚本内发起的跨域HTTP请求。例如,XMLHttpRequest 和 Fetch 遵循同源策略。因此,使用 XMLHttpRequest或 Fetch 的Web应用程序如果不使用跨域技术,只能将HTTP请求发送到其自己的域。

同源策略(same-origin policy):
浏览器出于安全方面的考虑,只允许与本域下的接口交互。不同源的客户端脚本在没有明确授权的情况下,不能读写对方的资源,防止恶意的网站窃取数据、cookie等。

但不一定是浏览器限制了发起跨站请求,也可能是跨站请求可以正常发起,但是返回结果被浏览器拦截了。

比如我现在用的Chrome/61.0.3163.91,虽然有同源策略的存在,但是在调试工具的Network下,Status Code 200 OK, 说明数据是返回回来了, 并且可以在Preview 或者 Response里看到数据。

什么才是同源:
字符串完全匹配才是同源,协议不同 域名不同(子域名和主域名并不是同源)端口不同,都不算是同源。

本地调试时:
一个http-server服务器只能监听一个端口,监听多个可以设置不同端口,比如:
http-server -c-1 -p 80
http-server -c-1 -p 81

是跨域还是本域同源,看2个点:

  1. 发送AJAX 请求的当前页面 URL 是什么
  2. AJAX 请求的 URL 是什么

这两个 URL 同源,则不是跨域。

此外,