关于跨域的一些知识

   跨域的报错一般是这样的：

`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.`

那么什么是跨域呢 ，跨域简单来说就是

浏览器使用 ajax时，如果请求了的接口地址 和 当前打开的页面 地址 不同源 称之为跨域

• （1）ajax : 浏览器只有使用ajax发送请求才会出现跨域。 href属性与src属性不会出现跨域

• （2） 接口地址 ： ajax请求的url

• （3）打开的页面：当前页面的window.location.href

• （4）不同源 ： 浏览器使用ajax,向不同源的接口发送请求，称之为 跨域访问

1.那什么是同源呢？

同源定义 ： 两个url地址的 协议 与 主机 与 端口 均一致 (&&)

协议：http , https , file

主机 ： 域名或者ip地址 （127.0.0.1）

端口 ：3000， 4399

不同源定义： 两个url地址，协议 主机 端口任何一个不一致 （||）

2.为什么要有同源与不同源？

2.1 出于安全考虑，浏览器不允许，页面向不同源的接口请求数据，因为如果 接口 和 网页不同源，浏览器认为是2个不同的 服务器

2.2 不同的服务器中内容是不可控的，不允许访问了

总结说人话： 浏览器为了保护你的电脑安全

举个栗子： 你去肯德基店里点餐，店员只允许你点肯德基的产品（炸鸡，可乐，上校鸡块），如果此时你在肯德基店里面点麦当劳的产品，浏览器会认为你是坏人，就会让保安把你赶出去

那该如何解决跨域呢？

第一种 ： CORS  目前的主流方案，也是最简单的方案

第二种：JSONP  曾经的跨域杀手，专治各种跨域问题。现在慢慢的淡出历史舞台

PS：面试官特别喜欢问这个，因为这个有一定的技术难度，也能体现一个人的实际开发经验

跨域解决方案一： CORS

• 注意：CORS技术在实际工作中由后端人员来实现，前端不需要做任何事情
• CORS :全称cross origin resource share （资源共享）
• 工作原理： 服务器 在返回响应报文的时候，在响应头中 设置一个允许的header
• res.setHeader('Access-Control-Allow-Origin', '*');
• 这行代码的意思是：服务器对浏览器说：老铁我是个好人，不要拒绝我！

跨域解决方案二：原生jsonp

• `了解jsonp原理，首先一定要明白script标签的src属性做了什么事情`

    

• (1)scr属性会给服务器发送请求, 请求一个js文件

• (2)浏览器会解析执行这个js文件里面的代码

• 如果浏览器直接返回js代码,浏览器会立即执行

 1.JSONP的核心原理：如果script标签的src属性的请求，服务器返回的是一个函数调用。则浏览器会执行这个

这是浏览器script标签的一个的漏洞（历史遗留问题）

2.实际开发中JSONP的工作流程

（1）设置script标签的src属性，向一个不同源的接口发送一个get请求

（2）src属性发送请求时，在参数中额外携带一个callback的参数，参数值是一个在页面中预先定于好的函数名

callback : 这是发明jsonp技术的人提出的一个君子之约，只要是jsonp前端程序员都统一将参数名定义为callback  （PS：别的参数也行，只要和服务器协商好 ）

callback属性值：预先定义的函数名，这个函数必须要在script标签之前定义

(3)服务器接收到请求之后，获取callback的参数值

(4)服务器将要响应的数据拼接成 函数调用格式，通过传参的方式将响应数据返回给浏览器

3.JSONP与CORS区别

CORS：

服务器返回响应头，前端无需任何处理

简单快捷，支持所有请求方式

JSONP：

浏览器：自定义响应回调函数，使用script标签的src请求

利用浏览器的src属性没有跨域这一限制特点

服务器：接收callback参数，返回函数调用

处理复杂，并且只支持get请求

原因：get请求参数直接在url后面拼接，而post请求参数是放在请求体中

以上就是跨域的基本介绍和解决方法，你学废了吗