原生js解决Uncaught SyntaxError: Unex

都知道，解决跨域通信的常用的方式是通过jsonp实现。原理是 通过<script>标签可以获取任意服务器资源、不受同源策略限制的特性。

原生js实现jsonp:

let src = "https://cnodejs.org/api/v1/topic/5433d5e4e737cbe96dcef312?callback=f";

function f(data) {
  console.log(data);
}

function addScriptTag(src) {
  let script = document.createElement('script');
  script.src = src;
  document.body.appendChild(script);
}

window.onload = function () {
  addScriptTag(src);
};

报错 Uncaught SyntaxError: Unexpected token :

分析：

<script>加载的内容会被当作js代码执行，json格式的数据肯定会报错。

解决：

1. 修改服务器端json数据，将json数据封装成函数，如：

callback({
  "success": true,
  "data": {
})

这样，返回的数据就可以直接调用。
注：回调函数的名字和服务器端函数的名字必须一致！！！

2. 通过jQuery实现

$.ajax({
  url: src,
  dataType: "jsonp",
  success: function (data) {
    console.log(data);
  }
})