跨域,CORS,JSONP

69 阅读1分钟

经验:

  1. 最开始测试运行server.js端口号无法打开页面时,换一个端口号(直接在终端改,无需改代码)或者重启电脑

  2. 看请求的文件:开发者工具-network-all-刷新

  3. 如果请求另一个路径下的文件不加域名的话会导致请求失败:默认为当前文件路径 2.png 1.png 解决方法:加域名

  4. onload 事件会在页面或图像加载完成后立即发生。此处直接打印无法实现,因为得让script先拿到friends.js的数据(一般用于body里) uTools_1668607375230.png

  5. 如果定义一个函数xxx就不用onload了,因为这tnnd是个回调!

window.xxx = (data) => {
  console.log(data);
};
  1. fs.readFileSync()方法是fs模块的内置应用程序编程接口,用于读取文件并返回其内容。
  2. 由于jsonp是主动整个js文件替换数据内容,所以谁都可以访问,因此要整个reference限制访问的域名。更安全的可以用到cookie等技术
if (request.headers["referer"].indexOf("http://frank.com:9990") === 0)
  1. 可能有很多接口,为了避免xxx被占用,我们可以用别的替换,这里我们整个随机数random,在script标签里加一个查询字符串,让服务端通过query得到这个查询字符串。
  2. 让window.xxx变成window.random
script.src = `${url}?callback=${random}`;        // frank.js
window['{{xxx}}']( {{data}} )                    // qq-com/friends.js
const string2 = string.replace("{{data}}", data).replace('{{xxx}}', query.callback);                                 // qq-com/server.js 
  1. 为了不占用标签,应该在访问到数据后就删去
script.onload =() => {
    script.remove()
}

这是目前frank.js的代码

uTools_1668611790427.png