jaxrsでapplication/json jQuery ajaxリクエストを送信するには 'Access-Control-Allow-Origin'エラーがなくても

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(); 


    } 

Mavenの依存関係：

 <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> 

の

リクエストヘッダ：

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 Chromeの拡張機能を使用することができます。

問題は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

ジャージに精通していないが、