跨域
常规地址格式为:
http//:127.0.0.1:3000/abc ==> http协议//ip地址:端口号/路径
跨域只会出现在ajax请求中
ajax请求地址与当前页面地址不同源,称之为跨域
1.ajax地址:服务器接口文档地址
2.当前页面地址:location.href
3.不同源:协议名(http,https) ,ip地址(192.xxx.xxx.xx),端口号(:30xx) 只要任意一个不相同就叫做不同源
跨域限制
跨域限制是浏览器为了保护用户的安全,避免受到其他服务器的攻击.
用户发送请求后,浏览器接受服务器的响应报文时,发现地址不同源就会拒绝这个响应.
解决跨域后端node.js方案
1.使用CORS技术
CORS技术全称cross origin resource share （资源共享）
工作原理： 服务器 在返回响应报文的时候，在响应头中 设置一个允许的header
res.setHeader('Access-Control-Allow-Origin', '*');
这行代码的意思是：服务器告诉浏览器我不是坏人,让我过去.
2.express中间件cors
const cors=require('cors') 导入cors模块
app.use(coro()) 使用cors模块
cors模块给所有路由自动添加res.setHeader('Access-Control-Allow-Origin', '*');
功能类似于axios拦截器,给所有ajax请求添加代码
解决跨域前端方案JSONP
ajax发送请求会存在跨域问题,jsonp就是通过其他请求方法绕过ajax发送请求.
script标签的src属性,a标签herf属性,location herf属性都能向服务器发送请求.
script标签的src会给服务器发送请求, 请求一个js文件(js代码).如果浏览器直接返回js代码,浏览器会立即执行.
JSONP的核心原理：如果script标签的src属性的请求，服务器返回的是一个函数调用。
本地页面提前声明这个函数,则浏览器会执行这个函数,这是浏览器script标签的一个的漏洞（历史遗留问题）
实际开发中JSONP的工作流程
- （1）设置script标签的src属性，向一个不同源的接口发送一个get请求 (JSONP只支持get请求，不支持post)
- （2）src属性发送请求时，在参数中额外携带一个callback的参数，参数值是一个在页面中预先定于好的函数名 callback=fn
- callback : 这是发明jsonp技术的人提出的一个君子之约，只要是jsonp前端程序员都统一将参数名定义为callback
- PS：别的参数也行，只要和服务器协商好
- callback属性值：预先定义的函数名，这个函数必须要在script标签之前定义
- (3)服务器接收到请求之后，获取callback的参数值(函数名fn)
- (4)服务器将要响应的数据拼接成 函数调用格式 fn(数据)，通过传参的方式将响应数据返回给浏览器
