什么是跨域?
跨域,指的是浏览器不能执行其他网站的脚本。它是由浏览器的同源策略造成的,是浏览器对javascript施加的安全限制。
所谓同源是指,域名,协议,端口均相同,下图可以很清楚的分辨出是否同源
浏览器执行javascript脚本时,会检查这个脚本属于哪个页面,如果不是同源页面,就不会被执行。
要解决跨域的问题,我们可以使用以下几种方法:
1. JSONP
原理
通过script标签引入一个js文件,这个js文件载入成功后会执行我们在url参数中指定的函数,并且会把我们需要的json数据作为参数传入。所以jsonp是需要服务器端的页面进行相应的配合的。
实现方法
在js中,我们直接用XMLHttpRequest请求不同域上的数据时,是不可以的。但是,在页面上引入不同域上的js脚本文件却是可以的,jsonp正是利用这个特性来实现的。
比如,有个a.html页面,它里面的代码需要利用ajax获取一个不同域上的json数据,我把这个数据放到自己用express搭建的服务器上了,http://localhost:3000,那么a.html中的代码就可以这样:
我们看到获取数据的地址后面还有一个callback参数,按惯例是用这个参数名,但是你用其他的也一样。当然如果获取数据的jsonp地址页面不是你自己能控制的,就得按照提供数据的那一方的规定格式来操作了。
因为是当做一个js文件来引入的,所以http://localhost:3000返回的必须是一个能执行的js文件,所以这个页面的后台代码可能是这样的:
最终输出的结果是{"name":"wwr","hobby":"sing","say":"hahhahhlalalala"}.
这样jsonp的原理就很清楚了,通过script标签引入一个js文件,这个js文件载入成功后会执行我们在url参数中指定的函数,并且会把我们需要的json数据作为参数传入。所以jsonp是需要服务器端的页面进行相应的配合的。
2. cors
全称:cross-origin resources sharing 跨域资源共享
原理
CORS定义一种跨域访问的机制,可以让AJAX实现跨域访问。CORS 允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。实现此功能非常简单,只需由服务器发送一个响应标头即可。
假设我们的项目在本地页面,而我们打算从http://127.0.0.1:5500请求提取数据。一般情况下,如果我们直接使用 AJAX 来请求将会失败,浏览器也会返回“源不匹配”的错误,"跨域"也就以此由来。
利用 CORS,http://127.0.0.1:5500只需添加一个标头,就可以允许来自本地页面的跨域请求。
前端相关设置
前端只需要创建一个ajax对象,如下图所示
服务器端的设置
服务器端对于CORS的支持,主要就是通过设置Access-Control-Allow-Origin来进行的。如果浏览器检测到相应的设置,就可以允许Ajax进行跨域的访问。
通过‘响应头’,设置允许跨的域(协议+域名+端口),如果想让所有的网站都能跨域,设置为‘*’。
3. 服务器代理跨域请求
原理
前端如果有跨域请求,那么把跨域请求让后端代理请求,等后端请求到数据后,把数据返回给前端。
比如我们的项目在http://localhost:3000/proxy,但是我们想请求https://cnodejs.org/api/v1/topics这个页面的数据,可以通过服务器代理的方法去实现。
前端相关设置
依然是创建一个ajax对象
服务器端相关设置