[英]cors enable in Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response
I'm using spring boot service for backend and and angular 6 for frontend. 我在后端使用spring boot服务,在前端使用angular 6。
In spring boot i enabled cors using. 在春季启动中,我启用了cors使用。
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/interview/**").allowedOrigins("*");
}
and i'm using intercepter for each service. 我正在为每个服务使用拦截器。
in frontend calling service: 在前端呼叫服务中:
headers = new Headers();
constructor(private http: Http, private logger: MLogger) {
this.headers.set("Access-Control-Allow-Origin", "*");
this.headers.set( 'Content-Type', 'application/json',);
this.headers.set( 'Accept', '*');
this.headers.set( 'sessionId', DataService.sessionId);
}
private options = new RequestOptions({ headers: this.headers});
interviewCommand: InterviewCommand;
getInterviewDetails(data: any): Promise<any> {
const serviceURL = environment.startInterviewURL;
return this.http
.post(serviceURL,data, this.options)
.toPromise()
.then(
interviewCommand => {
//doing some stuff
}
})
.catch(this.handleInterviewCommandError);
}
I'm getting below exception if using intercepter. 如果使用拦截器,我将遇到异常。 Without using interepter i'm not getting cors error.. 不使用拦截器,我不会得到错误提示。
Failed to load http://localhost:7070/example/myservice : Request header field Access-Control-Allow-Origin is not allowed by Access-Control-Allow-Headers in preflight response. 无法加载http:// localhost:7070 / example / myservice :在飞行前响应中,Access-Control-Allow-Headers不允许请求标头字段Access-Control-Allow-Origin。
In my intercepter i added below thing: 在我的拦截器中,我添加了以下内容:
if (request.getMethod().equals("OPTIONS")) {
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Origin-Methods", "GET, POST, OPTIONS");
response.setHeader("Access-Control-Allow-Headers", "Authorization, Content-Range, Content-Disposition, Content-Description,Origin, X-Requested-With");
response.setHeader("Access-Control-Expose-Headers", "*");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Max-Age", "4800");
}
Got Answer... 得到答案...
Removed this.headers.set("Access-Control-Allow-Origin", "*") from your frontend 从前端删除了this.headers.set(“ Access-Control-Allow-Origin”,“ *”)
and 和
added in backend in intercepter response.. 在拦截器响应中添加到后端。
response.setHeader("Access-Control-Allow-Headers", "Authorization,Content-Type, Content-Range, Content-Disposition, Content-Description,Origin, X-Requested-With, sessionId"); response.setHeader(“ Access-Control-Allow-Headers”,“授权,内容类型,内容范围,内容处置,内容描述,来源,X-Requested-With,sessionId”); response.setHeader("Access-Control-Allow-Origin", "*"); response.setHeader(“ Access-Control-Allow-Origin”,“ *”);
When you start playing around with custom request headers you will get a CORS preflight. This is a request that uses the HTTP OPTIONS verb and includes several headers, one of which being Access-Control-Request-Headers listing the headers the client wants to include in the request.
You need to reply to that CORS preflight with the appropriate CORS headers to make this work. One of which is indeed Access-Control-Allow-Headers. That header needs to contain the same values the Access-Control-Request-Headers header contained (or more).
https://fetch.spec.whatwg.org/#http-cors-protocol explains this setup in more detail.
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.