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设置（了解）
修改一些设置让浏览器不限制跨域访问
只有设置的电脑可以用，非常不通用，基本没人用
传送门