Generate TinyURL with client side JavaScript--need CORS workaround

Question

Generate TinyURL with client side JavaScript--need CORS workaround

2.5k Views Asked by coffeecola At 20 May 2025 at 01:52

I am building an small client-side application that is deployed on a website built with a WYSIWYG CMS. (Unfortunately, I do not have access to the server).

I am saving the app's state in the URL with a hash-bang, and would like to shorten it using something like TinyURL's create API. Essentially, I would like to query a 3rd party service with my long URL as the request, and receive a response with a shortened one.

My issue is that I don't know how to do this without recieving a CORS error message: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.site-im-working-on.com' is therefore not allowed access.

Here is an example of what I have been trying to do (using jQuery):

    var tinyAPI = 'http://tinyurl.com/api-create.php?url=';

    function getTinyURL () {
      var longURL = window.location.href;
      var request = tinyAPI + longURL;

      return $.get( request, function (response) {
        return response;
      });
    }

    // get tiny URL when on user action
    $('.share-button').on('click', function () {
      var tinyURL = tinyURL();
      // insert string into DOM element
      // copy string to user's clipboard
      // etc... 
    });

Is there any way to get around CORS using only client-side code?

(I am also open to using another URL shortener with a free API.)

Original Q&A

There are 1 best solutions below

**aidanharris** · Accepted Answer

Since you've stated you are open to using another API, Google has a JavaScript API that allows you to shorten a URL using their goo.gl URL shorter service.

I've adapted an example from Github below:

<!--
  Copyright (c) 2011 Google Inc.
  Licensed under the Apache License, Version 2.0 (the "License"); you may not
  use this file except in compliance with the License. You may obtain a copy of
  the License at
  http://www.apache.org/licenses/LICENSE-2.0
  Unless required by applicable law or agreed to in writing, software
  distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
  WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
  License for the specific language governing permissions and limitations under
  the License.
  To run this sample, replace YOUR API KEY with your application's API key.
  It can be found at https://code.google.com/apis/console/?api=plus under API Access.
-->
<!DOCTYPE html>
<html>
  <head>
    <meta charset='utf-8' />
    <style>
      #info {
        border: 1px solid black;
        padding: 0.25em;
      }
    </style>
    <script>
      // Enter the API key from the Google Develoepr Console - to handle any unauthenticated
      // requests in the code.
      // The provided key works for this sample only when run from
      // https://google-api-javascript-client.googlecode.com/hg/samples/simpleRequest.html
      // To use in your own application, replace this API key with your own.
      var apiKey = 'YOUR_API_KEY_HERE';
      function load() {
        gapi.client.setApiKey(apiKey);
        gapi.client.load('urlshortener', 'v1', showInputs);
      }
      function showInputs() {
        document.getElementById('requestFields').style.display = '';
      }
      function makeRequest() {
        function writeResponse(resp) {
          var responseText;
          if (resp.code && resp.data[0].debugInfo == 'QuotaState: BLOCKED') {
            responseText = 'Invalid API key provided. Please replace the "apiKey" value with your own.';
          } else {
            responseText = 'Short URL is: ' + resp.id;
          }
          var infoDiv = document.getElementById('info');
          infoDiv.innerHTML = '';
          infoDiv.appendChild(document.createTextNode(responseText));
        }
        var longUrl = document.getElementById('longUrl').value;
        var request = gapi.client.urlshortener.url.insert({
          'longUrl': longUrl
        });
        request.execute(writeResponse);
      }
    </script>
    <script src="https://apis.google.com/js/client.js?onload=load"></script>
  </head>
  <body>
    <p>Enter a long URL and click "Shorten URL" to get the short URL.</p>
    <div id="requestFields" style="display:none;">
      <label for="longUrl">Long URL </label>
      <input id="longUrl" type="text" value="https://stackoverflow.com" />
      <button onclick="makeRequest();">
        Shorten URL
      </button>
    </div>
    <div style="margin-top:0.5em;"><span id="info">Results</span></div>
  </body>
</html>

To use the above code you'll need to get an API key from the Google Developers Console

Generate TinyURL with client side JavaScript--need CORS workaround

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in REQUEST

Related Questions in CORS

Related Questions in CLIENT-SIDE

Related Questions in TINYURL

Trending Questions

Popular # Hahtags

Popular Questions