1.1-跨域介绍
-
1.跨域固定报错格式
-
只要是出现跨域问题,浏览器就会出现一个固定格式(没有之一)的报错信息
-
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
时,如果请求了的接口地址
和 当前打开的页面
地址不同源
称之为跨域-
(1)ajax : 浏览器只有使用ajax发送请求才会出现跨域。 href属性与src属性不会出现跨域
-
(2) 接口地址 : ajax请求的url
-
(3)打开的页面:当前页面的window.location.href
-
(4)不同源 : 浏览器使用ajax,向不同源的接口发送请求,称之为 跨域访问
-
-
-
3.什么是同源?
-
MDN官方文档传送门:浏览器的同源策略 - Web 安全 | MDN
-
同源定义 : 两个url地址的
协议
与主机
与端口
均一致 (&&)-
协议:http , https , file
-
主机 : 域名或者ip地址 (127.0.0.1)
-
端口 :3000, 4399
-
-
不同源定义: 两个url地址,
协议 主机 端口
任何一个不一致 (||)-
http:127.0.0.1:3000/abc
-
http:127.0.0.1:3000/efg
-
https:127.0.0.1:3000/efg
-
http:127.0.0.1:3000/hero/add
-
http:127.0.0.1:4399/hero/add
-
http:127.0.0.1:4399/hero/all
-
-
正在上传…重新上传取消正在上传…重新上传取消
-
4.为什么要有同源与不同源?
-
出于安全考虑,浏览器不允许,页面向不同源的接口请求数据,因为如果 接口 和 网页不同源,浏览器认为是2个不同的 服务器,
-
不同的服务器中内容是不可控的,不允许访问了
-
总结说人话:
浏览器为了保护你的电脑安全
-
举个栗子: 你去肯德基店里点餐,店员只允许你点肯德基的产品(炸鸡,可乐,上校鸡块),如果此时你在肯德基店里面点麦当劳的产品,浏览器会认为你是坏人,就会让保安把你赶出去
-
-
-
5.跨域解决方案介绍
-
跨域是前端工作中不可避免的问题:我们经常会出现请求不同源接口的情况,为了能够获取数据,解决跨域的问题方案也有很多,但是常用的就两种
-
第一种 :
CORS
-
目前的主流方案,也是最简单的方案
-
-
第二种:
JSONP
-
曾经的跨域杀手,专治各种跨域问题。现在慢慢的淡出历史舞台
-
PS:面试官特别喜欢问这个,因为这个有一定的技术难度,也能体现一个人的实际开发经验
-
-
<!-- 1.跨域固定报错格式 * 只要是出现跨域问题,浏览器就会出现一个固定格式(没有之一)的报错信息 * 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 * 打开的页面:当前页面的window.location.href * 不同源 : 浏览器使用ajax,向不同源的接口发送请求,称之为 跨域访问 3.什么是同源? * 同源定义 : 两个url地址的 协议 与 主机 与 端口 均一致 (&&) * 协议:http , https , file * 主机 : 域名或者ip地址 (127.0.0.1) * 端口 :3000, 4399 * 不同源定义: 两个url地址,协议 主机 端口任何一个不一致 (||) * 当前页面:http:127.0.0.1: