'Access-Control-Allow-Origin'에 누락 된 오류없이 jaxrs에서 application/json jQuery ajax 요청을 보내는 방법

Question

내 문제는 브라우저에서 jaxrs api 서버로 요청을 보내는 중 프리 플라이트 요청에서 오류가 발생했습니다.

크로스 원본 요청이 차단됨 : 동일한 원본 정책이 https://localhost:9091/api/employee/add에서 원격 리소스 읽기를 허용하지 않습니다. (이유 : CORS 헤더 'Access-Control-Allow-Origin'누락).

프리 플라이트 요청을 성공적으로 수행 할 수없는 이유를 알 수 없습니다. 우편 배달부 요청이 성공적이었습니다. 하지만 브라우저에서 요청을 보낼 때 떨어지고 있습니다.

Ajax 요청 :

   $.ajax({ 


       type: "POST", 
       url: "https://localhost:9091/api/employee/add", 
       cache: false, 
       data:JSON.stringify(employeeJSONObj), 
       dataType: "json", 
       contentType: 'application/json', 

       success: function(response){ 


       }); 

JSON 페이로드 :

{ 
    "employeeName":"Name3", 
    "nRIC":"NRIC3", 
    "dateOfBirth":"2017-01-02", 
    "address":"Address", 
    "salaryMode":"Monthly", 
    "bankAccount":"Bank Account", 
    "appointmentAs":"Security Supervisor (SS)", 
    "nationality":"Malaysian", 
    "maritalStatus":"Married", 
    "sex":"Female", 
    "nextOfKin":"Next Of kin", 
    "mobilePhone":"Mobile Phone", 
    "profilePicture":null, 
    "document":null 
} 

Jersy jaxrs API 서버 통합 :

@POST 
    @Consumes({ MediaType.APPLICATION_JSON}) 
    @Produces({ MediaType.APPLICATION_JSON}) 
    @Path("add") 
    public Response addEmployee(Employee employee) { 

     EmployeeImpl employeeImpl = 
       (EmployeeImpl) context.getBean("employeeImpl"); 


     if (employeeImpl.validateEmployeeDetails(employee)) { 

      employeeImpl.addEmployee(employee); 
      employee.setSuccessMessage("Employee added successfully"); 

     }else{ 

      employee.setErrorMessage("employee detail insertion failed due to invalid" + 
        " inputs, please recheck inputs and retry"); 

      return Response.ok().status(Response.Status.BAD_REQUEST) 
        .entity(employee) 
        .header("Access-Control-Allow-Origin", "*") 

        .header("Access-Control-Allow-Methods", "POST, OPTIONS") 
        .header("Access-Control-Allow-Headers","Content-Type") 
        .build(); 

     } 


     return Response.ok() 
       .entity(employee) 
       .header("Access-Control-Allow-Origin", "*") 
       .header("Access-Control-Allow-Methods", "POST, OPTIONS") 
       .header("Access-Control-Allow-Headers","Content-Type") 
       .build(); 


    } 

메이븐 의존성 :

 <dependency> 
      <groupId>com.sun.jersey</groupId> 
      <artifactId>jersey-server</artifactId> 
      <version>1.2</version> 
     </dependency> 
     <dependency> 
      <groupId>com.sun.jersey</groupId> 
      <artifactId>jersey-json</artifactId> 
      <version>1.18.1</version> 
     </dependency> 
     <dependency> 
      <groupId>com.sun.jersey</groupId> 
      <artifactId>jersey-grizzly2</artifactId> 
      <version>1.8</version> 
     </dependency> 

,691 363,210

요청 헤더 : 그것은 당신의 테스트 응용 프로그램 인 경우

Host: localhost:9091 
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:57.0) Gecko/20100101 Firefox/57.0 
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 
Accept-Language: en-US,en;q=0.5 
Accept-Encoding: gzip, deflate, br 
Access-Control-Request-Method: POST 
Access-Control-Request-Headers: content-type 
Origin: http://localhost:8080 
Connection: keep-alive 
Pragma: no-cache 
Cache-Control: no-cache 

Answer 1

, 당신은 크로스 요청을 할 수 있도록 Allow-Control-Allow-Origin 크롬 확장 기능을 사용할 수 있습니다.

문제는 8080과 9091 포트를 동시에 사용하는 것입니다.

Host: localhost:9091 
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:57.0) Gecko/20100101 Firefox/57.0 
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 
Accept-Language: en-US,en;q=0.5 
Accept-Encoding: gzip, deflate, br 
Access-Control-Request-Method: POST 
Access-Control-Request-Headers: content-type 
Origin: http://localhost:8080 

와 백 엔드가`OPTIONS` 요청에 CORS 헤더를 추가하지 않습니다 this

저지에 익숙하지