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

【问题标题】：Generate TinyURL with client side JavaScript--need CORS workaround使用客户端 JavaScript 生成 TinyURL——需要 CORS 解决方法
【发布时间】：2016-06-03 08:26:08
【问题描述】：

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

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

我的问题是我不知道如何在没有收到 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）：

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

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

【问题讨论】：

标签： javascript request cors client-side tinyurl

【解决方案1】：

既然您已声明您愿意使用其他 API，Google 有一个 JavaScript API，允许您使用他们的 goo.gl 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://stackoverflow.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 密钥

【讨论】：

这看起来很有希望。我将尝试编辑脚本以获取 window.location.href 并查看是否可以使其工作。
投反对票，因为这个答案不再相关，因为谷歌正在停止服务developers.googleblog.com/2018/03/…