JSONP跨域

Posted 2020-11-02 qfstudy

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/zh-CN/docs/Web/Security/Same-origin_policy
• http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html

---

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

---

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‘)`)

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

---

源码下载链接:Github

---