> For the complete documentation index, see [llms.txt](https://bvct1742.gitbook.io/one-book/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://bvct1742.gitbook.io/one-book/knowledge/http/jsonp-yuan-li.md).

# jsonp 原理

尽管浏览器有同源策略，但是 `<script>` 标签的 `src` 属性不会被同源策略所约束，可以获取任意服务器上的脚本并执行。`jsonp` 通过插入 `script` 标签的方式来实现跨域，参数只能通过 `url` 传入，仅能支持 `get` 请求。

**原理**

* 创建 `callback` 方法
* 插入 `script` 标签
* 后台接受到请求，解析前端传过去的 `callback` 方法，返回该方法的调用，并且数据作为参数传入该方法
* 前端执行服务器返回的方法调用

**实现**

```javascript
function jsonp({ url, params, callback }) {
    return new Promise((resolve, reject) => {
        let script = document.createElement('script');
        window[callback] = function(data) {
            resolve(data);
            document.body.removeChild(script);
        }
        params = { ...params, callback };
        let arrs = [];
        for (let key in params) {
            arrs.push(`${key}=${params[key]}`);
        }
        script.src = `${url}?${arrs.join('&')}`;
        document.body.appendChild(script);
    })
}
```