Reactjsからlocalhosted APIを呼び出す方法は？

Question

私は自分のreactjsクライアント側（Webpackサーバー上で実行中）からJavaのテストバックエンドに要求を出そうとしています。

両方ともローカルホストですが、異なるポート（3000と8888）にあります。

私はバックエンドにリクエストするために郵便配達員を使用していますが、私は期待される応答を得るので、すべて正しいと思われます。

XMLHttpRequest cannot load http://localhost:8888/api. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

は、私は私のサーバーを反応するから、私のバックエンドサーバーがHTTP要求を許可しないと思う：私は反応するから要求したいとき

しかし、私はCORSに関連し、このエラーを持っています。 私は、私のバックエンドに反応からの要求を処理することが大丈夫であることを知らせる方法を見つける必要があります。

テストバックエンドがあります。バックエンドがサーブレットとしてではなくAPIとして使われる前に私が言ったように。

public class test { 
     public Name getName() { 
      Name name = new Name("John"); 
      return name; 
     } 
} 

Answer 1

私は特にJavaについては知らないが、Javaエンドで応答ヘッダーを変更する必要があります。開発のために

（開発のみで）あなたの場所に次のヘッダーを持っている必要があります。

header("Access-Control-Allow-Origin", "*")

Answer 2

あなたは、サーバー上のレスポンスのヘッダの「アクセス制御 - 許可-XXX」を追加する必要があります-側。

res.header("Access-Control-Allow-Origin", "*"); 
res.header("Access-Control-Allow-Headers", "X-Requested-With"); 
res.header("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS"); 
res.header("Content-Type", "application/json;charset=utf-8"); 

Answer 3

これは、クロスオリジンアクセスを許可するためにCORSヘッダーを追加する必要があるためです。 CORSヘッダーの上、さらに参考のため

@GET 
@Path("{id}") 
@Produces({ MediaType.APPLICATION_JSON, MediaType.APPLICATION_XML }) 
public Response getPodcastById(@PathParam("id") Long id, @QueryParam("detailed") boolean detailed) 
     throws IOException, AppException { 
    Podcast podcastById = podcastService.getPodcastById(id); 
    return Response.ok() 
      .entity(podcastById, detailed ? new Annotation[]{PodcastDetailedView.Factory.get()} : new Annotation[0]) 
      .header("Access-Control-Allow-Origin", "*") 
      .header("Access-Control-Allow-Methods", "GET, POST, DELETE, PUT") 
      .allow("OPTIONS").build(); 
} 

：：次のように http://www.codingpedia.org/ama/how-to-add-cors-support-on-the-server-side-in-java-with-jersey/#2_Adding_HTTP_headers_to_resources_with_Jersey

春の場合は、あなたが行うことができます：あなたは、以下のコードのように送信している応答にヘッダを追加することによってそれを行うことができます

package hello; 

import java.util.concurrent.atomic.AtomicLong; 

import org.springframework.web.bind.annotation.GetMapping; 
import org.springframework.web.bind.annotation.RequestParam; 
import org.springframework.web.bind.annotation.CrossOrigin; 
import org.springframework.web.bind.annotation.RestController; 

@RestController 
public class GreetingController { 

    private static final String template = "Hello, %s!"; 
    private final AtomicLong counter = new AtomicLong(); 
    @CrossOrigin(origins = "http://localhost:9000") 
    @GetMapping("/greeting") 
    public Greeting greeting(@RequestParam(required=false, defaultValue="World") String name) { 
     System.out.println("==== in greeting ===="); 
     return new Greeting(counter.incrementAndGet(), String.format(template, name)); 
    } 

}