跨域
跨域介绍
- 跨域固定报错格式
- 只要是出现跨域问题,浏览器就会出现一个固定格式(没有之一)的报错信息
Access to XMLHttpRequest at '服务器url地址' from origin 'null' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
2. 什么是跨域?
- 浏览器使用ajax时,如果请求了的接口地址和当前打开的页面地址 不同源,称之为跨域
- ajax请求 : 浏览器只有使用ajax发送请求才会出现跨域。href属性与src属性不会出现跨域
- 接口地址 : 服务器接口文档地址(ajax请求的url)
- 当前页面地址:当前页面的
location.href
- 不同源:协议名(http/https)、ip地址、端口号 只要有任意一个不相同,就是不同源。
- ajax请求 : 浏览器只有使用ajax发送请求才会出现跨域。href属性与src属性不会出现跨域
- 什么是同源?
- MDN官方文档传送门:developer.mozilla.org/zh-CN/docs/…
- 同源的定义:两个url地址的协议名、主机、端口号三者一致就叫同源
- 协议:http,https,file
- 主机:域名或者ip地址 (127.0.0.1)
- 端口:3000
- 来看具体的实例:
- 当前页面地址:http://127.0.0.1:3000/data/index.html
- ajax地址1:https://127.0.0.1:3000/abc (不同源,协议不同)
- ajax地址2:http://127.0.0.1:3000/abc (同源, 三码合一)
- ajax地址3:http://192.118.88.85:3000/abc (不同源, ip不同)
- ajax地址4:http://127.0.0.1:4399/abc (不同源,端口号不同)
4. 浏览器为什么要有这种跨域保护限制?
- 浏览器为了保护用户安全,页面向不同源的接口请求数据,因为如果接口和网页不同源,浏览器会认为你向两个服务器发送了请求,而两个不同的服务器的数据是不可控的,所以浏览器阻止了这种行为。
- 大白话讲: 浏览器为了保护你的电脑安全
- 举个荔枝: 你去肯德基店里点餐,店员只允许你点肯德基的产品(炸鸡,可乐,上校鸡块),如果此时你在肯德基店里面点麦当劳的产品,浏览器会认为你是坏人,就会让保安把你赶出去
- 跨域解决方案介绍
- 跨域是前端工作中不可避免的问题:我们经常会出现请求不同源接口的情况,为了能够获取数据,解决跨域的问题方案也有很多,但是常用的就两种
- 第一种:CORS技术
- 目前的主流方案,也是最简单的方案,不需要前端写任何代码
- jsonp技术:曾经的跨域杀手(the king) 专治各种跨域问题。现在慢慢的淡出了历史的舞台。原理和流程复杂,可以体现前端技术含量。
- 第一种:CORS技术
跨域解决方案一:CORS
- CORS工作原理介绍
- CORS:全称
cross origin resource share
(资源共享) - 工作原理:服务器 在返回响应报文的时候,在响应头中设置一个允许的header
res.setHeader('Access-Control-Allow-Origin', '*');
- 这行代码的意思是:服务器对浏览器说:老铁我是好人,不要拒绝我!
express
使用中间件cors
:给所有的res
添加默认请求头Access-Control-Allow-Origin
- express有一个自带的中间件cors,它的作用是自动给每一个res设置默认请求头
- 这样就不用我们自己每一个接口都要设置一次了
- 官方文档传送门:www.npmjs.com/package/cor…
- 用法介绍
cors
中间件底层原理如下:
app.use((req, res, next) => {//任何请求都会进入这个use中间件
res.setHeader('Access-Control-Allow-Origin', '*')//设置响应头
next()//执行下一个中间件
})
跨域解决方案二:原生jsonp
- 了解jsonp的原理,首先一定要明白script标签的src属性做了什么事情
- (1)src属性会给服务器发送请求,请求一个js文件
- (2)浏览器会解析执行这个js文件里的代码
- 如果浏览器直接返回js代码,浏览器会立即执行
- jsonp的核心原理:利用script标签src属性来发送请求,服务器返回一个函数调用。则浏览器会执行这个函数因为跨域只对ajax有限制
- 这是浏览器script标签的一个漏洞(历史遗留问题)
2. jsonp的工作流程
- (1)浏览器:声明一个函数,用于接收服务器响应数据
- (2)浏览器:写一个script标签,路径是jsonp请求地址,添加一个额外参数callback=函数名
- (3)服务器:处理完请求之后,通过传参的方式返回一个函数调用的js代码,格式res.send('函数名(响应数据)')
- 函数名需要从参数callback获取
- (4)浏览器就会执行script标签响应的js代码
- jsonp与CORS区别
- CORS:
- 服务器返回响应头,前端无需任何处理
- 简单快捷,支持所有请求方式
- jsonp
- 浏览器:自定义响应回调函数,使用script标签的src请求
- 利用浏览器的src属性没有跨域这一限制特点
- 服务器:接受callback参数,返回函数调用
- 处理复杂,并且只支持get请求
- 原因:get请求参数直接在url后面拼接,而post请求参数是放在请求体中
- 浏览器:自定义响应回调函数,使用script标签的src请求