用客戶端JavaScript生成TinyURL - 需要CORS解決方法

我正在構建一個小型客戶端應用程序，該應用程序部署在使用所見即所得CMS構建的網站上。（不幸的是，我沒有訪問服務器）。用客戶端JavaScript生成TinyURL - 需要CORS解決方法

我使用hash-bang在URL中保存了應用程序的狀態，並且希望使用TinyURL的create API之類的東西縮短它的狀態。基本上，我想用我的長URL作爲請求來查詢第三方服務，並收到一個縮短的響應。

我的問題是，我不知道該怎麼做，而無需recieving一個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只使用客戶端代碼？

（我也開到使用另一個URL縮短了免費的API。）

來源

2016-02-22 coffeecola

既然你說你是開放的使用另一個API，谷歌有一個JavaScript API，使您使用縮短的URL的goo.gl網址較短的服務。

我已經適應了例如從下面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

來源

2016-02-22 03:24:21 aidanharris

這看起來很有希望的API密鑰。我將嘗試編輯腳本以獲取window.location.href並查看是否可以使用它。 – coffeecola

這工作。謝謝@aidanharris！ – coffeecola

用客戶端JavaScript生成TinyURL - 需要CORS解決方法

回答

相關問題