Uncaught (in promise) SyntaxError: Unexpected end of input at script.js:8:42-CodePudding

I am attempting to create a ROBLOX asset id returner using this api. I am using the product info function / api get request. I have made a script, but I continually get the error Uncaught (in promise) SyntaxError: Unexpected end of input at script.js:8:42 when I am extremely close to finishing.

Would someone be able to please help, I would be so grateful!

I'll link my code below.

JavaScript Code

function convert()
{
    var input = document.getElementById("AssetConverterArea").value;
    var output = document.getElementById("assetIdReturn");
    var webRequest = fetch('https://api.roblox.com/marketplace/productinfo?assetId='   input, {'mode': 'no-cors'});
    var assetId = webRequest.AssetId;

    webRequest.then(responce => responce.json()).then(d => {
            console.log(responce)
            assetId = d.AssetId;
        });

    if (assetId === undefined)
    {
        output.innerHTML = "Invalid Asset ID";
    } else {
        output.innerHTM = 'Your asset ID is: '   assetId;
    }
}

HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home</title>
    <link rel="icon" type="image/x-icon" href="Media/assetid.png">
    <link rel="stylesheet" href="style.css">

    <script src="script.js" defer></script>
</head>
<body>
    <header>
        <nav>
            <ul >
                <li ><a href="index.html" >Home</a></li>
                <li ><a href="credits.html" >Credits</a></li>
                <li ><a href="about.html" >About</a></li>
            </ul>
        </nav>

        <span ><img src="Media/assetid.png" alt=""></span>
    </header>

    <div ></div>

    <h1 >Asset Converter</h1>

    <p >
        This website is a simple tool to convert your Roblox decal & library IDs into Roblox Asset IDs. <br><span style="font-weight: 800;"> Thank you for checking out the website!</span>  
    </p>
        
    </p>

    <div ><textarea placeholder="Decal ID" id="AssetConverterArea"></textarea></div>

    <button  onclick="convert()"><span >Convert</span></button>

    <p id="assetIdReturn">Convert your ID, and get a return!</p>

    <p >This entire project's source code is free for you to check out on <a style="color: rgb(73,0,250); text-decoration: none;" href="https://github.com/hartleyfr/RobloxAssetReturner/tree/main">my github</a></p>
</body>
</html>

I tried using the CORS-Everywhere functions but to no avail. I attempted to use fixes found here on StackOverflow with it not working.

I expected it to work as follows

get the api return and table, find the asset id in the table, if the code can't find the assetId it says that the ID is invalid and asks for it to do it again. if it does find it, it shows it to the user.

CodePudding user response：

You have a bunch of problems here in your request in terms of promise resolving, but put simply this concept is not possible because you cannot run this script without disabling CORS at a browser level, which is not something you can do from a web page for security reasons.

You are passing the request mode no-cors but this means that the response is not accessible by your JS code. https://developer.mozilla.org/en-US/docs/Web/API/Request/mode

This fetch is never going to work because the API will not permit your cross-domain server to make the request.