看见高德地图使用异步加载方式是jsonp。来试一试jsonp
// server.js
// node server.js 启动服务
const express = require(‘express‘) const app = express() app.listen(7879, () => console.log(‘app is listen on port 7879‘)) app.get(‘/‘, (req, res) => { res.set(‘Access-Control-Allow-Origin‘, ‘*‘) // 跨域 res.send(‘init‘) })
这时不设置res.set(‘Access-Control-Allow-Origin‘, ‘*‘) ，浏览器会提示跨域错误
设置之后打印 ‘init’
// jsonp.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script> fetch(‘http://localhost:7879/‘) .then(res =>{ return res.text() }) .then(res => { console.log(res) // 打印init }) </script> </body> </html>
请求后浏览器提示
返回的init直接运行了。
在请求脚本之前定义一个init的变量就不会报错了，如果返回 init() 呢？
script是从上到下顺序执行的，所以变量定义在前面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title>
// <script>
// var init = 1
// </script> <script src="http://localhost:7879"></script> </head> <body> // <script>
// init
// </script> </body> </html>
const express = require(‘express‘) const app = express() app.listen(7879, () => console.log(‘app is listen on port 7879‘)) app.get(‘/‘, (req, res) => { // res.set(‘Access-Control-Allow-Origin‘, ‘*‘) res.send(‘init()‘) })
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> function init() { console.log(‘init执行‘) } </script> <script src="http://localhost:7879"></script> // img，script请求都没有跨域的问题 </head> <body> </body> </html>
打开html页面，浏览器打印了：
后台返回init()，直接执行了。
我们也可以在返回init()时添加参数，比如init(‘params‘)。
原文：https://www.cnblogs.com/liufulin/p/12104773.html