解释 jsonp 的原理,为何它不是真正的ajax ?

128 阅读1分钟

同源策略和跨域 (ノ°▽°)ノ 冲鸭!征服她!!!
浏览器的同源策略(服务端没有同源策略)和跨域
后端如nginx, 我们一般称为转发,不称为跨域

  • 哪些html 标签能绕过跨域?

    • 加载图片 CSS JS 可无视同源策略
    • <img src="跨域的图片地址" />
    • <link href="跨域的css地址" />
    • <script src="跨域的js地址"></script>
  • jsonp原理
    简易代码示例:
    后端被请求文件:jsonp.js (由后端处理拼接生成)

    // jsonp.js 文件内容
    abc(
        { name: 'xxx' }
    )
    

    前端请求代码:

    <script>
      window.abc = function (data) {
            console.log(data)
        }
    </script>
    <script src="http://localhost:8002/jsonp.js?username=xxx&callback=abc"></script>