弹簧启动'Access-Control-Allow-Origin' [英] 'Access-Control-Allow-Origin' with spring boot

问题描述

我在端口上公开的 docker 容器中运行了一个简单的 spring boot 服务8080 正在调用 mysql 数据库。

I have a simple spring boot service running in a docker container exposed on port 8080 that is calling a mysql database.

当我点击 localhost：8080 / blogs ，我回来了 [{author：Christopher Bolton，title：Test Title 1，content：这是一些内容，日期：2017-08-29}]

当我点击它时工作正常直接在浏览器中。但是，当我从 jQuery 尝试时，我得到正常的 Access-Control-Allow-Origin 。

This is working just fine when I hit it directly in the browser. However, when I try it from jQuery I am getting the normal Access-Control-Allow-Origin.

这是我的春季启动服务：

Here is my spring boot service:

@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<ChrisBolton> getAllUsers() {
    List<ChrisBolton> result = jdbcTemplate.query(
            "SELECT * FROM blog",
            (rs, rowNum) -> new ChrisBolton(rs.getString("author"), 
                                               rs.getString("title"), 
                                               rs.getString("content"), 
                                               rs.getDate("date"))
    );

    return result;
}
}

这是我的 jQuery ：

$.ajax({
  url: "http://localhost:8080/blogs",
  crossDomain: true
}).done(function(data) {

  console.log(data);
});

但我仍然收到此错误：

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.

我试过这个，将 @CrossOrigin 添加到 getAllUsers（）方法和我在课堂上尝试过。我还查看了这个因为我在端口 3000 上运行我的UI。但该链接并非特定于春季。

I have tried this by adding the @CrossOrigin to the getAllUsers() method and I have tried at the class level. I have also looked at this because I am running my UI on port 3000. But that link is not spring specific.

编辑

EDIT

添加我的请求标题：

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

网络标签中的响应（Chrome）：

Response in network tab (Chrome):

[{author：Christopher Bolton，title：Test Title 1，content： 这是一些内容，日期：2017-08-29}]

所以看起来我正在获取数据回到网络标签中。但是，我的 console.log（数据）产生 Access-Control-Allow-Origin

So it looks like I am getting data back in the network tab. However, my console.log(data) produces the Access-Control-Allow-Origin

推荐答案

尝试将此添加到您的应用程序中：

Try adding this to your application:

@SpringBootApplication
@RestController
public class ChrisboltonServiceApplication {

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurerAdapter() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**").allowedOrigins("*");
            }
        };
    }

...

此外，请尝试删除 crossDomain：true 来自 $ .ajax（）。

Also, try removing the crossDomain: true from the $.ajax().

这篇关于弹簧启动'Access-Control-Allow-Origin'的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！