跨域

1.报错格式

出现跨域时，控制台会报如图所示的错误

2.跨域的定义

跨域 : ajax的请求地址与页面地址不同源

需要注意的几点:

• ajax请求 : 只有ajax请求才会出现跨域
• 当前页面地址 : location.href
• 同源 : 协议名、ip地址、端口号均相同

3.同源,不同源出现的原因

浏览器为了保护电脑安全。

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

4.跨域的解决办法

（1）CORS

目前的主流方法，也是最简单的方法。

解决单个接口的跨域： 在路由里加上 res.setHeader('Access-Control-Allow-Origin', '*')

解决所有接口的跨域： 利用express自带的中间件cors，安装cors后设置跨域中间件

//设置跨域中间件 : 类似于拦截器,会给每一个路由自动设置允许跨域响应头
// (1)导入模块
 const cors = require('cors')
// (2)使用模块
app.use(cors())

（2）原生jsonp

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

• 实际开发中JSONP的工作流程：

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

（2）src属性发送请求时，在参数中额外携带一个callback的参数，参数值是一个在页面中预先定于好的函数名（callback属性值：预先定义的函数名，这个函数必须要在script标签之前定义）

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

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

• 流程图如下