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

Question

我正在构建一个小型客户端应用程序，该应用程序部署在使用所见即所得 CMS 构建的网站上。（不幸的是，我无法访问服务器）。

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

我的问题是，如果没有收到 CORS 错误消息，我不知道如何执行此操作： 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.

这是我一直在尝试做的事情的一个例子（使用 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... 
    });

有什么方法可以仅使用客户端代码绕过 CORS 吗？

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

Answer 1

既然你已经声明你愿意使用另一个 API，Google 有一个 JavaScript API 允许你使用他们的 [=20] 来缩短 URL =] URL 服务时间缩短。

我改编了下面 Github 中的示例：

<!--
  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://whosebug.com" />
      <button onclick="makeRequest();">
        Shorten URL
      </button>
    </div>
    <div style="margin-top:0.5em;"><span id="info">Results</span></div>
  </body>
</html>

要使用上面的代码，您需要从 Google Developers Console

中获取一个 API 密钥

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

Generate TinyURL with client side JavaScript--need CORS workaround

javascript

request

cors

client-side

tinyurl