localhost/serverでcorsを有効にする方法

外部サーバーからpdfをロードしようとしていますが、コンソールでこのエラーが表示されます。localhost/serverでcorsを有効にする方法

XMLHttpRequestはロードできません。 https://mobile.switchitapp.com/uploads/pdf/userGuide.pdf。いいえ要求されたリソースに 'Access-Control-Allow-Origin'ヘッダーが存在します。したがって、オリジン 'http://appsdata2.cloudapp.net'はにアクセスできません。

このエラーを取り除くにはどうすればよいですか？私は多くのことを試してみましたが、何もここで今まで私のために私を助けてください

感謝:)

を働いていない私のコード

<!DOCTYPE html> 
<html> 
<head> 
    <title>PDF.js Learning</title> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/1.8.472/pdf.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/1.8.472/pdf.worker.js"></script> 
    <script> 
     // URL of PDF document 
     var url = "https://mobile.switchitapp.com/uploads/pdf/userGuide.pdf"; 

     // Asynchronous download PDF 
     PDFJS.getDocument(url) 
      .then(function(pdf) { 
       return pdf.getPage(1); 
      }) 
      .then(function(page) { 
       // Set scale (zoom) level 
       var scale = 1.5; 

       // Get viewport (dimensions) 
       var viewport = page.getViewport(scale); 

       // Get canvas#the-canvas 
       var canvas = document.getElementById('the-canvas'); 

       // Fetch canvas' 2d context 
       var context = canvas.getContext('2d'); 

       // Set dimensions to Canvas 
       canvas.height = viewport.height; 
       canvas.width = viewport.width; 

       // Prepare object needed by render method 
       var renderContext = { 
        canvasContext: context, 
        viewport: viewport 
       }; 

       // Render PDF page 
       page.render(renderContext); 
      }); 
    </script> 
</head> 
<body> 
<canvas id="the-canvas"></canvas> 
</body> 
</html>

出典

2017-06-21 Anonymous

「var url = "https://cors-anywhere.herokuapp.com/https://mobile.switchitapp.com/uploads/pdf/userGuide.pdf"を試し、https://stackoverflow.com/を参照してください。質問/ 20035101/no-access-control-allow-origin-head-of-the-requested-resource-present-on-the-requested-resource/42744707＃42744707説明のために – sideshowbarker

も私のサーバーでこれをやりたいCorsを有効にしようとしましたが、どこが間違っているのか分かりません。 –

問題は、https://mobile.switchitapp.comサイトが応答でAccess-Control-Allow-Origin応答ヘッダーを送信しないことです。それはあなたのサイトですか？そうでなければ、私の他のコメントのようにプロキシを使ってリクエストを行う以外の方法はありません。 – sideshowbarker

てみますvar URL = "https://cors-anywhere.herokuapp.com/https://mobile.switchitアプリです.COM /アップロード/ PDF/userGuide.pdf」

はどちらかも

を動作しません。

提案された解決策は、コメントが機能することです。参照してください：

// URL of PDF document 
 
     var url = "https://cors-anywhere.herokuapp.com/" + 
 
"https://mobile.switchitapp.com/uploads/pdf/userGuide.pdf"; 
 

 
     // Asynchronous download PDF 
 
     PDFJS.getDocument(url) 
 
      .then(function(pdf) { 
 
       return pdf.getPage(1); 
 
      }) 
 
      .then(function(page) { 
 
       // Set scale (zoom) level 
 
       var scale = 1.5; 
 

 
       // Get viewport (dimensions) 
 
       var viewport = page.getViewport(scale); 
 

 
       // Get canvas#the-canvas 
 
       var canvas = document.getElementById('the-canvas'); 
 

 
       // Fetch canvas' 2d context 
 
       var context = canvas.getContext('2d'); 
 

 
       // Set dimensions to Canvas 
 
       canvas.height = viewport.height; 
 
       canvas.width = viewport.width; 
 

 
       // Prepare object needed by render method 
 
       var renderContext = { 
 
        canvasContext: context, 
 
        viewport: viewport 
 
       }; 
 

 
       // Render PDF page 
 
       page.render(renderContext); 
 
      });

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/1.8.472/pdf.js"></script> 
 
<canvas id="the-canvas"></canvas>

出典

2017-06-21 14:04:19 async5

はい、私のサーバー上でやりたい場合はどうするのですか？ –

同じコードを使用していますか？ – async5

は、ローカルホスト上でCORSを有効にすると、任意のリモートサーバー上で有効にすると違いはありません。 https://enable-cors.org/server.html

リモートサーバーではできない問題があります。ローカルホストではなくCORSを有効にする必要があります。あなたは疑問が幾分無効です。

出典

2017-06-21 16:59:28 async5

localhost/serverでcorsを有効にする方法

答えて

関連する問題