Encode non-ascii URLs as UTF-8 (#1920)

package.json

@@ -211,6 +211,7 @@
     "serialize-javascript": "1.3.0",
     "url": "0.11.0",
     "url-loader": "0.5.7",
+    "utf8": "2.1.2",
     "webpack-isomorphic-tools": "2.6.6"
   },
   "devDependencies": {

src/core/api/index.js

@@ -3,6 +3,7 @@
 
 import url from 'url';
 
+import utf8 from 'utf8';
 import 'isomorphic-fetch';
 import { schema as normalizrSchema, normalize } from 'normalizr';
 import { oneLine } from 'common-tags';
@@ -68,7 +69,8 @@ export function callApi({
       options.headers.authorization = `Bearer ${state.token}`;
     }
   }
-  const apiURL = `${API_BASE}/${endpoint}/${queryString}`;
+  // Workaround for https://github.com/bitinn/node-fetch/issues/245
+  const apiURL = utf8.encode(`${API_BASE}/${endpoint}/${queryString}`);
 
   return fetch(apiURL, options)
     .then((response) => {
@@ -86,9 +88,9 @@ export function callApi({
 
       log.warn(oneLine`Response from API was not JSON (was Content-Type:
         ${contentType})`, response);
-      return response.text().then((textResponse) => (
-        { jsonResponse: { text: textResponse }, response }
-      ));
+      return response.text().then((textResponse) => {
+        return { jsonResponse: { text: textResponse }, response };
+      });
     })
     .then(({ response, jsonResponse }) => {
       if (response.ok) {

tests/client/core/api/test_api.js

@@ -1,5 +1,6 @@
 /* global Response, window */
 import config from 'config';
+import utf8 from 'utf8';
 
 import * as api from 'core/api';
 import { ADDON_TYPE_THEME } from 'core/constants';
@@ -57,6 +58,17 @@ describe('api', () => {
         .then(() => mockWindow.verify());
     });
 
+    it('encodes non-ascii URLs in UTF8', () => {
+      const endpoint = 'diccionario-español-venezuela';
+      mockWindow.expects('fetch')
+        .withArgs(utf8.encode(`${apiHost}/api/v3/${endpoint}/`), {
+          method: 'GET', headers: {},
+        })
+        .once()
+        .returns(createApiResponse());
+      return api.callApi({ endpoint }).then(() => mockWindow.verify());
+    });
+
     it('clears an error handler before making a request', () => {
       mockWindow.expects('fetch').returns(createApiResponse());