title: React axios request blocked by CORS policy when deployed to server
body: <p>Ok, I hope I am not making a duplicate but my question is a bit different from most of the result for CORS questions.</p>
  
  <p>I have springboot rest api backend and I have reactJs frontend using Axios.
  on my API interface I added </p>
  
  <pre><code>@CrossOrigin(origins = {"http://localhost:3000", "http://localhost"})
  @RequestMapping ...
  ...
  </code></pre>
  
  <p>Locally everything is running fine.
  React running on <a href="http://localhost:3000" rel="nofollow noreferrer">http://localhost:3000</a> 
  api running on <a href="http://localhost:8080/apixxx/orders" rel="nofollow noreferrer">http://localhost:8080/apixxx/orders</a></p>
  
  <p>So I deployed them on my ubuntu server:
  React running on <a href="http://12.123.12.123" rel="nofollow noreferrer">http://12.123.12.123</a> (port is 80)
  api running on <a href="http://12.123.12.123:8080" rel="nofollow noreferrer">http://12.123.12.123:8080</a> (postman requests are successful)</p>
  
  <p>Now see, I put @CrossOrigin origin of "<a href="http://localhost" rel="nofollow noreferrer">http://localhost</a>" because that is for the deployed copy of my API, since relative to the server it is localhost.</p>
  
  <p>Now I am getting:
  Access to XMLHttpRequest at '<a href="http://localhost:8080/apireq/v1/apiresourcexx" rel="nofollow noreferrer">http://localhost:8080/apireq/v1/apiresourcexx</a>' from origin '<a href="http://12.123.12.123" rel="nofollow noreferrer">http://12.123.12.123</a>' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.</p>
  
  <p>this is the same error I get locally when I remove the @CrossOrigin.</p>
  
  <p>I tried adding in the origins "<a href="http://12.123.12.123" rel="nofollow noreferrer">http://12.123.12.123</a>", "<a href="http://12.123.12.123:80" rel="nofollow noreferrer">http://12.123.12.123:80</a>", "<a href="http://myDomainName.com" rel="nofollow noreferrer">http://myDomainName.com</a>" (my domain name), "<a href="http://myDomainName.com:80" rel="nofollow noreferrer">http://myDomainName.com:80</a>".</p>
  
  <p>Nothing works. Still the same error.</p>
  
  <p>What I found works is: </p>
  
  <pre><code>@CrossOrigin(origins = {"*"})
  </code></pre>
  
  <p>But I dont want to do that....
  Please help.</p>
  
  <p><strong>-----UPDATE-----</strong></p>
  
  <p>Ok, I am really confused now. 
  Apparently, I just realized that the axios routing I used is axios.post('<a href="http://localhost:8080/apixxx/orders" rel="nofollow noreferrer">http://localhost:8080/apixxx/orders</a>', ...); And basically this will point to the springboot running on my local machine, not on the prod server. If that is the case, then each of my client will be different origin and all of them will be calling my API... If that is the case then the only solution is that one I am avoiding: @CrossOrigin(origins ="*")</p>
  
  <p>Please advise. What do you guys usually do in this situaion.</p>