什么是跨域?跨域的解决办法?
一.为什么会出现跨域问题?
出于浏览器的同源策略限制。同源策略是一种约定,它是浏览器最核心也最基本的安全功能。
同源策略:会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源就是在同一个域当中,就算两个页面具有相同的协议、主机和端口号。
二.什么是跨域?
当一个请求url的协议、域名、端口号三者之间任意一个与当前页面url不同即为跨域。其实就是浏览器无法执行其他网站的脚本。
三.非同源的限制
1.无法读取非同源网页的 Cookie、LocalStorage 和IndexedDB
2.无法接触非同源网页的 DOM
3.无法向非同源地址发送 AJAX 请求
四.解决方案
1.CORS(跨域资源共享)
(1).解释:cors是通过服务器开发跨域权限来实现跨域效果的。 (跨域ajax请求的根本解决方法)
前端不需要做额外的修改,就当跨域的问题不存在;支持各种方式请求(post,get等)
(2).步骤:
(a)可以下载npm包 cors
(b)当作 express 的中间件,注意代码应该放在顶部(在路由之前配置cors中间件)
var cors = require('cors')
app.use(cors())
(3).注意事项:
(a)cors主要由服务器端进行配置,客户端浏览器无需做任何额外配置即可请求开启cors的接口。
(b)cors在浏览器有兼容性。只有支持xhr(XMLHttpRequest)Level2的浏览器,才能正常访问开启了cors的服务端接口。(例如IE10以上,谷歌4以上、火狐3.5以上)
(4).响应头部:
(a)允许访问的外域URL : Access-Control-Allow-Origin:可以设为*通配符或者指定的url
(b)请求头 : Access-Control-Allow-Headers:仅支持客户端向服务器发送的9个请求头:
例如Accept、Accept-Language、Content-Language、DPR、Downlink、Save-Data、Viewport-Width、Width、Content-Type(仅限于text/plain、multipart/form-data、application/x-www-form-urlencoded三者之一),如果客户端向服务端发送了额外的请求头则需要通过Accept-Control-Allow-Headers对额外的请求头进行声明,否则请求会失败。
(c)http方法(请求方式) : Accept-Control-Allow-Methods :默认仅支持客户端发起GET、POST、HEAD
(5).分类:根据请求方式和请求头的不同区分简单请求和预检请求。
(a)简单请求:
①请求方式:GET、POST、HEAD三者之一。
②HTTP头部信息不超过以下几种字段:无自定义头部字段、Accept、Accept-Language、Content-Language、DPR、Downlink、Save-Data、Viewport-Width、Width、Content-Type(仅限于text/plain、multipart/form-data、application/x-www-form-urlencoded)
(b)预检请求:在浏览器与服务器正式通信之前,浏览器会先发送OPTION请求进行预检,以获知服务器是否允许该实际请求,所以这一次的OPTION请求称为预检请求。服务器真正响应预检请求之后,才会发送真正的请求,并且携带真实数据。
①请求方式为GET、POST、HEAD之外的请求Methods类型。
②请求头中包含自定义头部字段。
③向服务器发送了application/json格式的数据。
(c)区别:简单请求客户端只发送一次请求到服务器;而预检请求需要发送两次请求,OPTION预检请求发送成功后,才会发送真正的请求。
2.JSONP()
(1).解释:jsonp通过< script >标签的src属性,请求服务器上的数据,同时服务器返回一个函数的调用。这种数据请求数据的方式称之为JSONP。可以不受限制的从其他域加载资源的能力,进行跨域通信。
前端不需要做额外的修改,就当跨域的问题不存在;支持各种方式请求(post,get等)
(2).特点:
(a)JSONP不属于真正的Ajax请求,因为它没有使用XMLHttpRequest对象。
(b)JSONP仅支持GET请求。
本文仅供参考:参考自 https://www.jianshu.com/p/71c65919fc93