title: 'Access-Control-Allow-Origin' with spring boot
body: <p>I have a simple <code>spring boot</code> service running in a <code>docker</code> container exposed on port <code>8080</code> that is calling a <code>mysql</code> database.</p>
  
  <p>When I hit <code>localhost:8080/blogs</code>, I get back <code>[{"author":"Christopher Bolton","title":"Test Title 1","content":"This is some content","date":"2017-08-29"}]</code></p>
  
  <p>This is working just fine when I hit it directly in the browser. However, when I try it from <code>jQuery</code> I am getting the normal <code>Access-Control-Allow-Origin</code>.</p>
  
  <p>Here is my spring boot service:</p>
  
  <pre><code>@SpringBootApplication
  @RestController
  public class ChrisboltonServiceApplication {
  
  public static void main(String[] args) {
      SpringApplication.run(ChrisboltonServiceApplication.class, args);
  }
  
  @Autowired
  private JdbcTemplate jdbcTemplate;
  
  @CrossOrigin
  @RequestMapping(path="/blogs")
  public @ResponseBody Iterable&lt;ChrisBolton&gt; getAllUsers() {
      List&lt;ChrisBolton&gt; result = jdbcTemplate.query(
              "SELECT * FROM blog",
              (rs, rowNum) -&gt; new ChrisBolton(rs.getString("author"), 
                                                 rs.getString("title"), 
                                                 rs.getString("content"), 
                                                 rs.getDate("date"))
      );
  
      return result;
  }
  }
  </code></pre>
  
  <p>Here is my <code>jQuery</code>:</p>
  
  <pre><code>$.ajax({
    url: "http://localhost:8080/blogs",
    crossDomain: true
  }).done(function(data) {
  
    console.log(data);
  });
  </code></pre>
  
  <p>But I am still getting this error:</p>
  
  <pre><code>XMLHttpRequest cannot load http://localhost:8080/blogs. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.
  </code></pre>
  
  <p>I have tried <a href="https://spring.io/guides/gs/rest-service-cors/" rel="noreferrer">this</a> by adding the <code>@CrossOrigin</code> to the <code>getAllUsers()</code> method and I have tried at the class level. I have also looked at <a href="https://stackoverflow.com/questions/18642828/origin-http-localhost3000-is-not-allowed-by-access-control-allow-origin">this</a> because I am running my UI on port <code>3000</code>. But that link is not spring specific.</p>
  
  <p><strong><em>EDIT</em></strong></p>
  
  <p>Adding my request headers:</p>
  
  <pre><code>GET /blogs HTTP/1.1
  Host: localhost:8080
  Connection: keep-alive
  Accept: */*
  Origin: http://localhost:3000
  User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) 
  AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.113 
  Safari/537.36
  Referer: http://localhost:3000/
  Accept-Encoding: gzip, deflate, br
  Accept-Language: en-US,en;q=0.8
  </code></pre>
  
  <p>Response in network tab (Chrome):</p>
  
  <p><code>[{"author":"Christopher Bolton","title":"Test Title 1","content":"This is some content","date":"2017-08-29"}]</code></p>
  
  <p>So it looks like I am getting data back in the network tab. However, my <code>console.log(data)</code> produces the <code>Access-Control-Allow-Origin</code></p>