1、前后端未分离:
前端代码及请求数据接口都在同一个服务器上,前端代码测试依赖服务器
2、前后端分离:
静态服务器:运行前端代码
后台服务器:运行数据接口服务器
3、同源策略
同源策略是浏览器的一个安全功能,不同源的客户端脚本在没有明确授权的情况下,不能读写对方资源。所以a.com下的js脚本采用ajax读取b.com里面的文件数据是会报错的。
4、跨域分析:ajax/iframe
iframe: iframe A 到iframe B 过程中操作共享数据.比如window.name,就报错
5、jsonp解决跨域问题
(1)、原理:在js代码中引用cdn如jquery的cdn,jquery就可以在本js文件中执行,因此可以通过在script标签的思路来解决跨域问题。
<script src="https://cdn.bootcss.com/jquery/3.3.1/core.js"></script>
(2)、本地模拟跨域:在本地开启9000端口,请求node环境下8889的数据。
(3)、解决跨域问题:js原生和node后端环境
前端代码:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> 我来自于localhost:9000 <button id="btn">点我发ajax请求</button> <div id="main"></div> </body> </html>
// 实现jsonp // 1:script标签的创建及加载 var script = document.createElement('script'); // 2:服务器返回的数据 需要在函数中被执行 // 3:挂载一个全局函数,先来个函数名 var callbackName = 'callback'; // callback // 挂在window上 window[callbackName] = function (data) { document.getElementById("main").interHTML = data; } // 4:吧这个函数名传递给服务器 script.src = 'http://localhost:8889/jsonp?callback=' + callbackName; // 5:将标签插入到body中 document.body.appendChild(script);
nodejs后端代码:
const http = require('http'); const url = require('url');//核心对象url来获取query let server = http.createServer(); server.on('request',(req,res)=>{ if (req.url.startsWith('/jsonp')) { // 1:从请求url参数中获取callback对应的值 let fnName = url.parse(req.url,true).query.callback;//获取请求中callbackName let data = JSON.stringify({name:'jack'}); // es6拼接函数名 (数据) 的字符串返回给客户端 let str = fnName + `('${data}')`; //[Object object] res.end(str); } }); //服务器监听8889端口 server.listen(8889,()=>{ console.log('服务器启动在8889端口'); })
6、总结:
(1)编写代码:前端人员编写 全局函数 + script标签 + 传递函数名
(2)后端人员: 响应 函数名('数据') 的字符串,让script标签执行
(3)jsonp请求方式必须是GET
(4)没有兼容性问题