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)没有兼容性问题