跨域
为什么会出现跨域？
- 因为浏览器有同源策略的限制，同源策略是浏览器最核心最基础的安全策略。
- 端口，协议，域名，有一者不同就会出现跨域的问题。
解决跨域的方式
- JSONP
- CORS
JSONP怎样解决跨域？
所谓的JSONP解决跨域问题就是前端在合适的时期动态添加一个<script>标签，请求后端给的接口带上一个回调函数。
因为<script>标签不受浏览器同源策略的限制。
手摸手带你解开JSONP的原理
实现JSONP跨域和JSONP原理的几步
**前端**- 前端先定义一个回调函数
<script type="text/javascript" charset="utf-8"> function callback(data){ console.log(data) }</script>2.在合适的阶段通过<script>标签请求后端给出的地址带上callback回调参数
<script src="http://192.168.1.107:3000?callback=callback" type="text/javascript" charset="utf-8"></script>后端
- 开启一个接口服务
var express = require('express');var app = express();app.get('/',function(req,res,next){ res.end("ok")})app.listen(3000,function(){ console.log('JSONP') })2.等前端请求接口的时候，获取请求的参数的回调
app.get('/',function(req,res,next){ var callback = req.query.callback; })3.最后后端把所需的数据放到获取到的回调函数参数内，返回给前端（返回的是字符串），浏览器会把它解析为js执行
app.get('/',function(req,res,next){ var callback = req.query.callback; //模拟所需的数据 var data = { err_ok:0, message:"请求成功", data:{ name:"july", age:21 } } res.end(`${callback}(${JSON.stringify(data)})`) })最终后端代码
var express = require('express');var app = express();app.get('/',function(req,res,next){ var callback = req.query.callback; //模拟所需的数据 var data = { err_ok:0, message:"请求成功", data:{ name:"july", age:21 } } res.end(`${callback}(${JSON.stringify(data)})`) })app.listen(3000,function(){ console.log('JSONP') })最终前端的代码
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> </head> <body> <script type="text/javascript" charset="utf-8"> function callback(data){ console.log(data) } </script> <script src="http://192.168.1.107:3000?callback=callback" type="text/javascript" charset="utf-8"></script> </body></html>前端接收到的结果
JSONP原理就是这里简单
--end--