1561346255894.png
看到这种错误 就是跨域
跨域-基本概念
浏览器在Ajax调接口时，请求了一个不同源的 地址 就回出现跨域问题
跨域-同源
一个完成的请求地址 包含了3个部分
http://127.0.0.1:4399/login
1. 协议:http://
2. 地址:127.0.0.1
3. 端口:4399
什么是同源？
协议，地址，端口这三个 都一样
什么是不同源?
协议，地址，端口三个中任何一个不相同，称之为不同源
跨域-浏览器同源安全限制
- 为了保证用户的安全，浏览器做了限制
- 当ajax请求不同源接口是，默认不允许的，
- 因为 页面请求不同源接口时，意味着 页面 和 接口所处的服务器是不一样的，请求的服务器中是否有而已代码，无法确定，出于安全，直接不允许
跨域-方案
工作中不可避免会碰到一些不同源的调用情况，有很多的解决方案可以实现这个功能
跨域-方案-CORS（主流）
准备工作
- 准备接口
- 准备页面调用接口
- 通过设置允许 让 ajax 可以请求这个不同源的接口
注意
- 服务器设置一个允许的
头 (响应头)浏览器就可以无视同源限制 直接访问了
1561348287781.png
实现代码
// 注册路由
app.get('/data',(req,res)=>{
// 设置允许访问的头
// 设置所有的请求 都可以访问
res.setHeader('Access-Control-Allow-Origin','*')
res.send({
info:'打雷啦',
msg:'下雨回家收衣服啦！！！'
})
})
原理
- 服务器设置一个允许的header
- 浏览器接收到这个响应之后，检查是否有这个header
- 有：允许访问
- 没有：阻止 访问 ,直接报错
中间件优化设置
1.cors:设置允许跨域 CORS:cross origin resource share
下载，导入，使用
1.npm i cors
2.导入 cors 设置允许跨域 const cors = require('cors')
3.使用第三方中间件 允许跨域 app.use(cors())
注意低版本IE不兼容 低版本浏览器不识别这个头
2.自己用原生的写个中间件允许跨域 中间件：请求和响应中间执行
app.use((req, res, next) => {
// res也是共享的
// 中间件中 统一设置了允许访问
console.log('设置允许')
res.setHeader('Access-Control-Allow-Origin', '*')
next() // 继续向后执行
})
3.本质都是设置了允许的header
跨域-方案-JSONP（可能会慢慢的被淘汰）
- script标签的src属性支持跨域访问 没有同源限制
- 服务器 接收script标签的src发过来的请求，返回了一个函数的调用
- doIt({"name":"jack","age":18})
- 浏览器接收到这个函数的调用，本地解析为js 并执行
-
只要页面中定义了这个函数 就会调用
1561350499606.png
通过callback参数 告诉服务器函数名
1561351682016.png
-
- script的src属性中，额外的写一个参数 callback=xxx xxx是函数名
- 服务器接收 xxx 生成一个函数的调用，并返回
- 接收callback的值
- 拼接为xxx({"name":"jack"})
- 浏览器接收到返回的值，解析为js 并执行
xxx({"name":"jack"}) - callback后面的值可以改吗？
想怎么变就怎么写 - 返回的值，服务器可以更改吗？
可以修改，可以根据逻辑返回
CORS &JSONP总结
- 工作中前端要干什么？
- 都不需要写什么代码
- 大部分的工作都是后端 做
- 这部分内容一般出现在什么地方？
面试，聊到了 跨域 可以说说这个 - CORS和JSONP的特点是什么
1.CORS ：后端设置之后，直接调接口- get和post都支持
- 工作中基本都用第一种
- JSONP：前端要准备script标签 callback参数，准备函数
只能发get，无法发post
跨域-方案-Chrome设置（了解）
修改一些设置让浏览器不限制跨域访问
只有设置的电脑可以用，非常不通用，基本没人用
