跨域问题及jsonp解决方案

1、前后端未分离：

前端代码及请求数据接口都在同一个服务器上,前端代码测试依赖服务器

2、前后端分离：

静态服务器：运行前端代码

后台服务器：运行数据接口服务器

3、同源策略

同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。所以a.com下的js脚本采用ajax读取b.com里面的文件数据是会报错的。

4、跨域分析：ajax/iframe

ajax: 协议 + 主机 + 端口其中有一个与之前页面所在的不一样,这个ajax请求就跨域了

iframe: iframe A 到iframe B 过程中操作共享数据.比如window.name,就报错

5、jsonp解决跨域问题

（1）、原理：script标签请求的js代码会被执行，如在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）没有兼容性问题

跨域问题及jsonp解决方案

猜你喜欢