2017-09-24 9 views
0

「No」Access-Control-Allow-Origin 'ヘッダーが要求されたリソースに存在します。 Chromeを使用して自分のマシンで.htmlファイルを実行しようとしています。私はlocalhost:8080上で実行しているSpringBoot Webサービスにアクセスしようとしています。SpringBootとHtml:要求されたリソースに 'Access-Control-Allow-Origin'ヘッダーがありません

Webサービス自体から直接Chromeで呼び出して結果を得ることはできますが、index.htmlを通じてWebサービスを呼び出そうとすると、アクセス制御エラーが発生します。

私もスプリングtutorialを試しましたが、私はまだ同じ問題を抱えています。

index.htmlを

<title>My Worst Enemy</title> 
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script> 
<script> 
    $(document).ready(function() 
    { 
     $("#run").click(function() 
     { 
      var summonerName = document.getElementById("summonerName"); 
      console.log(summonerName.value); 

      $.ajax({ 
       type: "GET", 
       dataType: "json", 
       url: "http://localhost:8080/summonerName/" + summonerName.value, 
       success: function(data){   
        alert(data); 
       } 
      }); 
     }); 
    }); 
</script> 
</head> 

<body> 
    <input type="text" name="summonerName" id="summonerName" value="Zann Starfire"> 
    <button id="run">Run Summoner</button><br> 
</body> 
</html> 

WebController.java

package com.myWorstEnemy.web.controller; 

import org.springframework.web.bind.annotation.*; 

@RestController 
public class WebController 
{ 
    @RequestMapping("/") 
    public String helloWorld() 
    { 
     return "Hello world!"; 
    } 

    @CrossOrigin(origins = "http://localhost:8080") 
    @RequestMapping(method = RequestMethod.GET, value = "/summonerName/{summonerName}") 
    public String summonerName(@PathVariable String summonerName) 
    { 
     return "The summoner name = " + summonerName; 
    } 
} 

なぜこれがクロスオリジン・リクエストのですか?私は自分のコンピュータからindex.htmlを実行しています。ローカルホストは私が実行しているウェブページとは別の起源であるとは思わないでしょうが、私は何かが間違っています。

発信元からの要求を有効にするためにindex.htmlに追加できるものはありますか、それとも別の場所で行う必要がありますか?

+0

ファイルをWebアプリケーションまたはファイルシステム経由で取得していますか? URLはchromeのhttp://localhost/.../index.htmlかfile://.../index.htmlですか? file://は別のドメインです。 try origins = '*' – okaram

+0

単語* origin *は、「同じシステム」または「同じ環境」を意味するものではありません。 * origin *という単語は、非常に具体的な技術的意味を持っています。スキーム+ホスト+ポートの組み合わせを意味します。 https://tools.ietf.org/html/rfc6454#section-5を参照してください。同一起点ポリシーの目的のために、2つの起点は、スキーム+ホスト+ポートの組み合わせが正確に一致する場合にのみ一致します。 https://en.wikipedia.org/wiki/Same-origin_policy元のもののルールに従って、あなたが試みているのは原点通過のリクエストです – sideshowbarker

+0

私はfile://のことについて本当に考えていませんでした別の起源ですが、それは理にかなっています。私はちょうど私がウェブページをどのように動かしているかに注意を払っていませんでした。助けてくれてありがとう! – Styrfire

答えて

0

したがって、ファイルシステムを通じてindex.htmlをロードしていました。 "file://.../index.html"は、Chromeで実行したときのURLで、元のURLはlocalhostではありませんでした。そのように、それは私にエラーを与えた。

@CrossOrigin(origins = "*") 

@CrossOrigin(origins = "http://localhost:8080") 

の交換

で働いていました。提案のためにokaramに感謝します。

関連する問題