JSONP跨域

JSONP的使用

1.浏览器的同源策略

• 同源策略限制了从同一个源加载的文档或脚本如何与来自另外一个源的资源进行交互。这是一个用于隔离潜在恶意文件的重要安全机制。

---

2.一个源的定义

若是两个页面的协议，端口和域名都相同，则两个页面具备相同的源，这就是同源。
http://www.example.com/dir/page.html这个网址，协议是http://，域名是www.example.com，端口是80（默认端口能够省略）。它的同源状况以下。

• http://www.example.com/dir2/other.html：同源
• http://example.com/dir/other.html：不一样源（域名不一样）
• http://v2.www.example.com/dir/other.html：不一样源（域名不一样）
• http://www.example.com:81/dir/other.html：不一样源（端口不一样）

---

参考文章

• https://developer.mozilla.org...
• http://www.ruanyifeng.com/blo...

---
同源政策规定，AJAX请求只能发给同源的网址，不然就报错。

---

3.JSONP实现跨域访问数据

JSONP(JSON with Padding)是JSON的一种“使用模式”
因为同源策略，通常来讲位于 server1.example.com 的网页没法与不是 server1.example.com的服务器沟通，而 HTML 的<script> 元素是一个例外。

ajax请求受同源策略影响，不容许进行跨域请求

而script标签src属性中的连接却能够访问跨域的js脚本，利用这个特性，服务端再也不返回JSON格式的数据，而是返回一段调用某个函数的js代码，在src中进行了调用，这样实现了跨域。

JSONP是服务器与客户端跨源通讯的经常使用方法。最大特色就是简单适用，老式浏览器所有支持，服务器改造很是小。

JSONP的基本思想是，动态建立一个<script>元素，script元素发送请求不熟同源政策的限制，只能发送get请求。服务器收到请求后，将数据放在一个指定名字的回调函数里传回来。

<script>//SRL server rendered javascript
        button.addEventListener('click', (e) => {
            //动态建立script
            var script = document.createElement('script')
            let functionName='blog1'+parseInt(Math.random()*100000,10)
            
            //callback
            window[functionName]=function(result){
                if(result==='success'){
                    amount.innerText=amount.innerText-1
                }else{} 
            }
            //发送请求
            script.src = 'http://feile.com/pay?callback='+functionName
            document.body.appendChild(script)
            
            script.onload = function (e) {
                // debugger
                e.currentTarget.remove()
                delete window[functionName]
            }
            script.onerror = function (e) {
                alert('fail')
                e.currentTarget.remove()
                delete window[functionName]
            }
        })
    </script>

上面的代码经过动态建立添加script元素，向服务器发送请求，查询字符串必须有callback参数，用来指定回调函数的名字。

response.write(`${query.callback}.call(undefined,'success')`)

服务器收到这个请求之后，会将数据放在回调函数的参数位置返回。这时只要浏览器定义了对应的回调函数，该函数就会当即被调用。