使用客户端JavaScript生成TinyURL——需要CORS解决方案_Javascript_Request_Cors_Client Side_Tinyurl

使用客户端JavaScript生成TinyURL——需要CORS解决方案

javascript cors

使用客户端JavaScript生成TinyURL——需要CORS解决方案,javascript,request,cors,client-side,tinyurl,Javascript,Request,Cors,Client Side,Tinyurl,我正在构建一个小型客户端应用程序，该应用程序部署在使用WYSIWYG CMS构建的网站上。（很遗憾，我没有访问服务器的权限）我正在用一个hash-bang将应用程序的状态保存在URL中，并希望使用TinyURL的CreateAPI之类的东西来缩短它。基本上，我希望以我的长URL作为请求查询第三方服务，并收到一个短URL的响应我的问题是，我不知道如何在不收到CORS错误消息的情况下执行此操作：请求的资源上不存在“Access Control Allow Origin”头。起源'http://

我正在构建一个小型客户端应用程序，该应用程序部署在使用WYSIWYG CMS构建的网站上。（很遗憾，我没有访问服务器的权限）

我正在用一个hash-bang将应用程序的状态保存在URL中，并希望使用TinyURL的CreateAPI之类的东西来缩短它。基本上，我希望以我的长URL作为请求查询第三方服务，并收到一个短URL的响应

我的问题是，我不知道如何在不收到CORS错误消息的情况下执行此操作：

请求的资源上不存在“Access Control Allow Origin”头。起源'http://www.site-im-working-on.com因此，不允许访问。

下面是我一直在尝试做的一个示例（使用jQuery）：

tinyAPI变量http://tinyurl.com/api-create.php?url='; 函数getTinyURL（）{ var longURL=window.location.href； var请求=tinyAPI+longURL；返回$.get（请求、函数（响应）{ 返回响应； }); } //在执行用户操作时获取微小的URL $（'.share button'）。在（'click'，函数（）{ var tinyURL=tinyURL（）； //在DOM元素中插入字符串 //将字符串复制到用户的剪贴板 //等等。。。 }); 有没有办法只使用客户端代码

（我也愿意使用另一个URL缩短器和一个免费的API。）

既然你已经声明你愿意使用另一个API，谷歌有一个允许你使用他们的goo.gl URL缩短服务来缩短URL

我改编了下面的一个例子：


#信息{
边框：1px纯黑；
填充：0.25em；
}
//从Google DevelopePR控制台输入API密钥-以处理任何未经验证的
//代码中的请求。
//提供的密钥仅在从运行时适用于此示例
// https://google-api-javascript-client.googlecode.com/hg/samples/simpleRequest.html
//要在您自己的应用程序中使用，请用您自己的API密钥替换此API密钥。
var apiKey='您的API密钥在这里'；
函数加载（）{
gapi.client.setApiKey（apiKey）；
load（'urlshortener'，'v1'，showInputs）；
}
函数showInputs（）{
document.getElementById（'requestFields'）。style.display=''；
}
函数makeRequest（）{
函数writeResponse（resp）{
var-responseText；
if（响应代码和响应数据[0].debugInfo=='QuotaState:BLOCKED'）{
responseText='提供的API密钥无效。请将“apiKey”值替换为您自己的值。'；
}否则{
responseText='短URL为：'+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
});
请求。执行（写响应）；
}
输入长URL并单击“缩短URL”以获取短URL
长URL
缩短URL
结果

要使用上述代码，您需要从

获取API密钥，这看起来很有希望。我将尝试编辑脚本以抓取window.location.href，看看是否能让它正常工作。由于谷歌正在停止该服务，这个答案不再相关，所以我投了反对票 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... });

<!--
  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>