首页
后端开发
PHP
JavaScript JSONP 跨域请求实现

JavaScript JSONP 跨域请求实现

19 次浏览 0 条评论
rar
rar

JSONP(JSON with Padding) 是一种利用 [removed] 标签不受同源策略限制的特点，实现跨域数据获取的技术。

核心步骤：

  1. 前端构建回调函数： 定义一个全局函数，用于处理接收到的 JSON 数据。
  2. 动态创建 [removed] 标签： 设置 src 属性指向跨域接口地址，并将回调函数名作为参数传递。
  3. 服务端返回数据： 服务端接收回调函数名，将数据包装在回调函数调用中返回。
  4. 前端接收数据： [removed] 加载完成后自动执行回调函数，从而获取跨域数据。

示例代码：

前端 (index.html):

<!DOCTYPE html>

<html>
<head>
  <title>JSONP Example</title>
</head>
<body>
  [removed]
    function handleData(data) {
      console.log(data); 
    }
  [removed]
  [removed][removed]
</body>
</html>

服务端 (example.com/api):

from flask import Flask, request

app = Flask(__name__)

@app.route('/api')
def api():
  callback = request.args.get('callback')
  data = {'message': 'Hello from server!'}
  return f"{callback}({data})" 

if __name__ == '__main__':
  app.run()

注意：

  • JSONP 只支持 GET 请求。
  • 存在安全风险，需确保数据来源可靠。
rar 文件大小：1.32KB