为什么会存在跨域问题？

因为所有支持JavaScript的浏览器都有一个叫做“同源策略”的安全策略。
具体怎么个策略法不是本章所探讨的。
这个安全策略就导致了不能跨域请求。

什么是跨域？

跨域大概就是你以一个‘http://localhost:3000’去请求了一个‘http://localhost:3001’的资源（反之亦然）。
我们的浏览器就会很友好地给我们提示：

image

此处用的是fetch

但是很多时候，我们特别需要跨域，所以市面上出现了闻名的jsonp用来解决跨域问题。

jsonp是如何实现跨域的？

jsonp的实现遵循了一个原理：

js文件是可以不受安全策略的限制而随便下载的

所以，我们可以在html的顶部加上我们要请求的资源，例如：

<script type="text/javascript" src="http://localhost:3000/test.js></script>

通过查看浏览器的network，这个资源是请求到了，跨域也成功了！

jsonp就是通过这个原理来实现跨域的，当然不仅仅是这些。

简易代码实现jsonp跨域

众所周知，jsonp的跨域，是要带上callback函数的。

我们把本地实现的back函数传递过去 ?callback=back

<script>
    function back(data) {
        console.log(data);
    }
</script>
       
<script type="text/javascript" src="http://localhost:3000/test.js?callback=back"></script>
  

在http://localhost:3000/test.js里，我们只需要执行back函数即可：

back({message:"success"});

并且返回了json

{ 
    message:"success"
}

约定回调函数名很重要！约定回调函数名很重要！约定回调函数名很重要！

---

额外小细节

如果我在http://localhost:3000/test.js里，我不用我们约定的back回调函数名，那么我们的控制什么都不会打印，比如我此刻：

say({message:"success"});

image

没有定义say所以控制台报错啦！

同理，如果你重复定义

const back = ({message:"success"});

也会报错：

image

这都是语法问题啦！