Fetch Failing with ‘ in Next.js or Node.js

I am writing a Next.js api page that parse the data from a series of URLs. All of the URLs that contain the tick character ' do not return data while the URLs that without it do return data. When I run the same code in Chrome's dev console or a RESTful Client, the URLs with the tick character ' successfully return data. Both scenarios successfully connect (HTTP 200), but results are not found when running in Next.js project. Does anyone know what is causing this difference in behavior?

UPDATES:

  1. I have tried both encodeURI and encodeURIComponent. They do not fix the issue.
  2. I have also tried using AYR%27KA. Does not fix issue.

*NOTE: To prevent CORS, run in Browser Dev Tools from the site here

const worksEveryWhereURL = "https://robertsspaceindustries.com/api/starmap/star-systems/STANTON",
    brokenInNodeURL = "https://robertsspaceindustries.com/api/starmap/star-systems/AYR'KA";

async function getJSONFrom(url){
    const opts = {method: "POST"};
    let response, json;

    response = await fetch( url, {method:"POST"} );
    json = response.json();

    return json;
}

function testResponse(json) {
    try {
        return json.data.resultset.length > 0;
    } catch(err) {
        return false;
    }
}

const example1 = await getJSONFrom( worksEveryWhereURL );
const example2 = await getJSONFrom( brokenInNodeURL );

console.log( testResponse(example1) ); //"true" in chrome and "true" in next.js api page
console.log( testResponse(example2) ); //"true" in chrome and "false" in next.js api page

Just for reference, here is the code that I am using as an api page that is returning an empty resultset:

export default async function handler(req, res) {
    const worksEveryWhereURL = "https://robertsspaceindustries.com/api/starmap/star-systems/STANTON",
        brokenInNodeURL = "https://robertsspaceindustries.com/api/starmap/star-systems/AYR'KA";

    async function getJSONFrom(url){
        const opts = {method: "POST"};
        let response, json;

        response = await fetch( url, {method:"POST"} );
        json = response.json();

        return json;
    }

    function testResponse(json) {
        try {
            return json.data.resultset.length > 0;
        } catch(err) {
            return false;
        }
    }

    const example1 = await getJSONFrom( worksEveryWhereURL );
    const example2 = await getJSONFrom( brokenInNodeURL );

    console.log( testResponse(example1) ); //"true" in chrome and "true" in next.js api page
    console.log( testResponse(example2) ); //"true" in chrome and "false" in next.js api page
}

When the response returns incorrectly, it looks like this:

{
  "success": 1,
  "code": "OK",
  "msg": "OK",
  "data": {
    "rowcount": 0,
    "totalrows": 0,
    "estimatedrows": false,
    "pagesize": 0,
    "pagecount": null,
    "page": 1,
    "offset": 0,
    "startrow": 0,
    "resultset": []
  }
}

While a correct response looks like:

{
  "success": 1,
  "code": "OK",
  "msg": "OK",
  "data": {
    "rowcount": 1,
    "totalrows": 1,
    "estimatedrows": false,
    "pagesize": 0,
    "pagecount": null,
    "page": 1,
    "offset": 0,
    "startrow": 0,
    "resultset": [
      {
        "id": "398",
        "code": "AYR'KA",
        "description": "Primarily a military system focused on supporting, housing, and training Xi’an ground troops. Its close proximity to the Perry Line made it strategically important during the Human / Xi’an cold war. Once relations normalized, Xi’an forces from the Perry Line systems withdrew to here.  ",
        "frost_line": "179.10000000",
        ...
      }
    ]
  }
}


Read more here: https://stackoverflow.com/questions/68472455/fetch-failing-with-in-next-js-or-node-js

Content Attribution

This content was originally published by Xion Dark at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: