Java Spring Cloud - Zuul Proxy 正在产生一个没有“访问控制允许来源”的 ajax 响应
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/28670640/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Spring Cloud - Zuul Proxy is producing a No 'Access-Control-Allow-Origin' ajax response
提问by Given Nyauyanga
Startup Appplication:
启动应用：
@SpringBootApplication
@EnableZuulProxy
public class ZuulServer {
public static void main(String[] args) {
new SpringApplicationBuilder(ZuulServer.class).web(true).run(args);
}
}
My YAML file is like this:
我的 YAML 文件是这样的：
server:
port:8080
spring:
application:
name: zuul
eureka:
client:
enabled: true
serviceUrl:
defaultZone: http://localhost:8761/eureka/
zuul:
proxy:
route:
springapp: /springapp
I have a microservice application (on port 8081) called springapp and has some rest services. Below is my client UI app:
我有一个名为 springapp 的微服务应用程序（在端口 8081 上）并且有一些休息服务。下面是我的客户端 UI 应用程序：
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script type="text/javascript" src="js/libs/jquery/jquery.min.js" ></script>
</head>
<body>
<script type="text/javascript">
$.ajax({
url: 'http://localhost:8080/zuul/springapp/departments',
type: 'GET'
}).done(function (data) {
consoe.log(data);
document.write(data);
});
</script>
</body>
</html>
But I get a
但我得到一个
XMLHttpRequest cannot load http://localhost:8080/zuul/springapp/departments. No
'Access-Control-Allow-Origin' header is present on the requested
resource. Origin 'http://localhost:8383' is therefore not allowed access.
This UI HTML5 app is on http://localhost:8383/SimpleAPp/index.html. CORS, CORS, CORS... Please help. BTW the http://localhost:8080/zuul/springapp/departmentsreturns a json list as supposed to when on the browser address bar. The spring.io blog heresays that there is no need for a filter because the zuulproxy takes care of that but I don't know why it is not working for me.
这个 UI HTML5 应用程序位于http://localhost:8383/SimpleApp/index.html。CORS，CORS，CORS... 请帮忙。顺便说一句，http://localhost:8080/zuul/springapp/departments在浏览器地址栏上返回一个 json 列表。这里的 spring.io博客说不需要过滤器，因为 zuulproxy 会处理这个问题，但我不知道为什么它对我不起作用。
采纳答案by Grinish Nepal
Adding this piece of code to your class annotated with @EnableZuulProxy should do the trick.
将这段代码添加到使用 @EnableZuulProxy 注释的类中应该可以解决问题。
@Bean
public CorsFilter corsFilter() {
final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
final CorsConfiguration config = new CorsConfiguration();
config.setAllowCredentials(true);
config.addAllowedOrigin("*");
config.addAllowedHeader("*");
config.addAllowedMethod("OPTIONS");
config.addAllowedMethod("HEAD");
config.addAllowedMethod("GET");
config.addAllowedMethod("PUT");
config.addAllowedMethod("POST");
config.addAllowedMethod("DELETE");
config.addAllowedMethod("PATCH");
source.registerCorsConfiguration("/**", config);
return new CorsFilter(source);
}
回答by Dave Syer
That's just the browser telling you that you breached its common origin policy (see Wikipedia entryand a huge amount of material on the internet, none of which is really relevant to the tags you added). You can either teach the browser that it is OK to load resources from a different address by servicing the CORS pre-flight checks (e.g. in a Filter) or load the HTML through the proxy (hint: the latter is much easier and less error prone).
那只是浏览器告诉您您违反了其共同来源政策（请参阅维基百科条目和互联网上的大量资料，其中没有一个与您添加的标签真正相关）。您可以通过服务 CORS 飞行前检查（例如在 a 中Filter）或通过代理加载 HTML（提示：后者更容易且不易出错）来告诉浏览器可以从不同地址加载资源.
回答by a better oliver
When your application runs on http://localhost:8383then you can only make AJAX-calls to http://localhost:8383. Zuul doesn't and cannot change that.
当您的应用程序继续运行时，http://localhost:8383您只能对http://localhost:8383. Zuul 没有也不能改变这一点。
What Zuul can do is mapping requests for e.g. http://localhost:8383/zuul/to http://localhost:8080/zuul/. But your browser would have to call http://localhost:8383/zuul/springapp/departmentsand you have to configure that mapping.
Zuul 可以做的是将请求映射到例如http://localhost:8383/zuul/to http://localhost:8080/zuul/。但是您的浏览器必须调用http://localhost:8383/zuul/springapp/departments并且您必须配置该映射。
回答by Mate ?imovi?
I had a similar problem, with Angular Web app consuming RESTful services implemented by Spring Boot with Zuul and Spring Security.
我有一个类似的问题，Angular Web 应用程序使用由 Spring Boot 和 Zuul 和 Spring Security 实现的 RESTful 服务。
None of the above solutions worked. I realized that the problem was NOT in Zuul, but in Spring Security.
上述解决方案均无效。我意识到问题不在于 Zuul，而在于 Spring Security。
As the official documentation (CORS with Spring Security) states, when using Spring Security, CORS must be configured prior to Spring Security.
正如官方文档（带有 Spring Security 的 CORS）所述，在使用 Spring Security 时，CORS 必须在 Spring Security 之前进行配置。
Finally, I was able to integrate Grinish Nepal's (see prior answers) solution into a solution that works.
最后，我能够将 Grinish 尼泊尔（参见先前的答案）的解决方案整合到一个有效的解决方案中。
Without further ado, here is the code that enables CORS with Spring Security and Zuul:
不用多说，这里是使用 Spring Security 和 Zuul 启用 CORS 的代码：
@Configuration
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
//irrelevant for this problem
@Autowired
private MyBasicAuthenticationEntryPoint authenticationEntryPoint;
@Override
protected void configure(HttpSecurity http) throws Exception {
http
//configure CORS -- uses a Bean by the name of corsConfigurationSource (see method below)
//CORS must be configured prior to Spring Security
.cors().and()
//configuring security - irrelevant for this problem
.authorizeRequests()
.anyRequest().authenticated()
.and()
.httpBasic()
.authenticationEntryPoint(authenticationEntryPoint);
//irrelevant for this problem
http.addFilterAfter(new CustomFilter(),
BasicAuthenticationFilter.class);
}
//The CORS filter bean - Configures allowed CORS any (source) to any
//(api route and method) endpoint
@Bean
CorsConfigurationSource corsConfigurationSource() {
final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
final CorsConfiguration config = new CorsConfiguration();
config.setAllowCredentials(true);
config.addAllowedOrigin(CorsConfiguration.ALL);
config.addAllowedHeaders(Collections.singletonList(CorsConfiguration.ALL));
config.addAllowedMethod("OPTIONS");
config.addAllowedMethod("HEAD");
config.addAllowedMethod("GET");
config.addAllowedMethod("PUT");
config.addAllowedMethod("POST");
config.addAllowedMethod("DELETE");
config.addAllowedMethod("PATCH");
source.registerCorsConfiguration("/**", config);
return source;
}
//configuring BA usernames and passwords - irrelevant for this problem
@Autowired
public void configureGlobal(AuthenticationManagerBuilder auth) throws Exception {
...
}
}
回答by Mounir Messaoudi
I had the same issue, and i have fixed by adding CorsFilter bean
我有同样的问题，我已经通过添加 CorsFilter bean 修复了
@Bean
public FilterRegistrationBean corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
CorsConfiguration config = new CorsConfiguration();
config.setAllowCredentials(true);
config.addAllowedOrigin("*");
config.addAllowedHeader("*");
config.addAllowedMethod("*");
source.registerCorsConfiguration("/**", config);
FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
bean.setOrder(0);
return bean;
}
And adding zuul's properties this code
并添加zuul的属性这段代码
zuul:
sensitiveHeaders:
ignored-headers: Access-Control-Allow-Credentials, Access-Control-Allow-Origin
You can find more detail about the issue here
您可以在此处找到有关该问题的更多详细信息
回答by htopiwala
Just adding the following to the configuration worked for me
只需将以下内容添加到对我有用的配置中
zuul:
ignoredHeaders: Access-Control-Allow-Credentials, Access-Control-Allow-Origin
