title: POST request is not working, but GET is working fine. No 'Access-Control-Allow-Origin' header is present on the requested resource
body: <p>I have a POST and a GET method served from the same domain from where the request is getting fired. Though, I felt that CORS wont be an issue, but it seems to be, as the port is different.</p>
  
  <p>After adding the headers, I could manage to serve my GET request, but POST is not working.</p>
  
  <p>I have added the headers on the server side, below is the code:</p>
  
  <pre><code>    @SuppressWarnings("unchecked")
      @RequestMapping(method=RequestMethod.OPTIONS,value="/refer")
      public ResponseEntity&lt;?&gt; options(){
          return new ResponseEntity(getHeaders(), HttpStatus.OK);
  
      }
  
  
      @RequestMapping(method=RequestMethod.GET,value="/search",produces="application/json")
      public ResponseEntity&lt;?&gt; searchCook(@ModelAttribute("cookSearch") CookSearch cookSearch){
  
          ResponseDto&lt;List&lt;DtoCook&gt;&gt; response = new ResponseDto&lt;&gt;();
          List&lt;DtoCook&gt; results = serviceCook.search(cookSearch);
          response.setData(results);
          response.setMessage(results.size()+" found.");
          return new ResponseEntity&lt;&gt;(response, getHeaders(),HttpStatus.OK);
  
      }
  
  
      @SuppressWarnings("unchecked")
      @RequestMapping(method=RequestMethod.POST,value="/refer",produces="application/json",consumes="application/json")
      public ResponseEntity&lt;?&gt; referCookPost(@ModelAttribute("dtoCookRefer") DtoCookRefer dtoCookRefer,BindingResult result) {
  
          System.out.println("in cook rest controller");
  
          // set the headers to allow CORS
          MultiValueMap&lt;String, String&gt; headers = getHeaders();
  
          System.out.println(dtoCookRefer.getCookName()+ " phone");
          ResponseDto&lt;DtoCookRefer&gt; respDto = new ResponseDto&lt;&gt;();
          respDto.setData(dtoCookRefer);
  
          //run Spring validator manually
          new CookReferValidator().validate(dtoCookRefer, result);
  
          if(serviceCookRefer.checkUniquePhNum(dtoCookRefer)) {
              respDto.setMessage("Phone number already present");
              return new ResponseEntity&lt;&gt;(respDto, headers,HttpStatus.UNPROCESSABLE_ENTITY);
          }
  
  
          // validate cook data
          if(result.hasErrors()) {
              //TODO set message source
              respDto.setMessage("Improper data");
              return new ResponseEntity&lt;&gt;(respDto, headers,HttpStatus.UNPROCESSABLE_ENTITY);
  
  
          }else {
              // save data to database
              serviceCookRefer.referCook(dtoCookRefer);
              // return proper response
              respDto.setMessage("Processed Successfully");
              return new ResponseEntity(respDto, headers, HttpStatus.OK);
          }
  
  
      }
  
      private MultiValueMap&lt;String, String&gt; getHeaders(){
  
          MultiValueMap&lt;String, String&gt; headers = new LinkedMultiValueMap&lt;String,String&gt;();
          headers.add("Cache-Control", "no-cache, no-store, must-revalidate");
          headers.add("Pragma", "no-cache");
          headers.add("Expires", "0");
          headers.add("Access-Control-Allow-Origin","http://example.org");
          headers.add("Access-Control-Allow-Methods","GET,PUT,POST,DELETE,OPTIONS");
          headers.add("Access-Control-Allow-Headers", 
                  "Cache-Control,Pragma,Expires,Access-Control-Allow-Origin,"
                  + "Access-Control-Allow-Methods,Content-Type,Transfer-Encoding,Date");
          return headers;
      }
  </code></pre>
  
  
  
  <p>Below is the code in Angular:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Injectable } from '@angular/core';
  import {HttpClient, HttpHeaders} from '@angular/common/http';
  import { CookRefer } from './cook-refer';
  
  @Injectable({
    providedIn: 'root'
  })
  export class CookReferService {
    private _url : string = "http://123.121.166.243:8080/ffc/ext/cook/refer";
    constructor(private _http : HttpClient) { }
  
    headers = new HttpHeaders({
      'Content-Type':'application/json',
      'Access-Control-Request-Method':'POST'
    });
  
    options={headers:this.headers};
  
    
    refer(cook : CookRefer){
      return this._http.post&lt;any&gt;(this._url,cook,this.options);
    }
  }</code></pre>
  </div>
  </div>
  
  I have even added an OPTIONS method, but did not help. I am unsure if its necessary. I need help on the below points:</p>
  
  <ul>
  <li>It looks like browser blocks CORS request. The request does not even reach the server.</li>
  <li>especially for POST it triggers a preflight request even before I added the headers in client (angular) side, but not for GET.</li>
  <li>why GET is working but not POST?</li>
  </ul>