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.)
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