2

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

我正在使用 hash-bang 将应用程序的状态保存在 URL 中，并希望使用 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）：

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

    函数 getTinyURL () {
      var longURL = window.location.href;
      var request = tinyAPI + longURL；

      返回 $.get( 请求，函数（响应）{
        返回响应；
      });
    }

    // 在用户操作时获取微小的 URL
    $('.share-button').on('点击', function () {
      var tinyURL = tinyURL();
      // 将字符串插入 DOM 元素
      // 复制字符串到用户的剪贴板
      // ETC...
    });

有没有办法只使用客户端代码来绕过CORS ？

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

4

1 回答 1

0

由于您已声明您愿意使用其他 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 密钥

于 2016-02-22T03:24:21.790 回答