什么是跨域?跨域的解决办法?

一.为什么会出现跨域问题?

出于浏览器的同源策略限制。同源策略是一种约定,它是浏览器最核心也最基本的安全功能。
同源策略:会阻止一个域的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

posted @ 2022-10-27 13:57  Zzxzzx999  阅读(148)  评论(0编辑  收藏  举报