我正在使用Angular 2并尝试在get方法上发送标头参数。我有以下代码：
let tokenUrl2 = "http://localhost:8080/users";
let headers = new Headers();
headers.append('abc', token);
let options = new RequestOptions({ headers: headers });
return this.http.get(tokenUrl2, options);
我收到此错误：
Response for preflight is invalid (redirect)
我也添加了这些参数，但是我得到了同样的错误：
headers.append('Content-Type', 'application/json');
headers.append('Authorization':'Bearer ' + token);
有人能告诉我发送标头参数的正确方法是什么。非常感谢你:)）
编辑1
网址“http://localhost:8080/users”来自spring boot web app（它是一个REST服务）。我正在尝试与春季启动应用程序沟通角度应用程序。我的想法是向它发送一个先前从另一个REST服务获得的令牌。在第一个REST服务中，我得到了一个令牌。这是一个带POST的REST服务，它可以工作。然后，我通过GET方法将此令牌发送到第二个REST服务（http://localhost:8080/users）。第二部分不起作用。我尝试将GET方法更改为POST，因为在第一部分使用POST方法可以正常工作，但这个新的更改都不起作用。我仍然收到相同的消息：预检的响应无效（重定向）。
我有这些问题：
如果我的第一个REST服务（使用POST实现）有效，为什么第二个服务没有？这是因为我的请求（我的角应用程序）没有实现CORS？
我希望通过这些细节，你可以帮助我解决我的问题。
谢谢！
编辑2
最初，我认为从Angular app向REST服务发送头参数时我只有一个错误。但是，我已经调查过，我发现我的问题包含了更多的组件。我告诉我的组件：
我有一个角度应用程序，需要从Spring启动应用程序中使用REST服务。每个REST服务都需要身份验证，为此我使用JWT。
首先。我的角度应用程序使用身份验证的REST服务。如果这样做了。 REST服务返回一个令牌。
二。使用此令牌，angular app可以使用Spring Security保护的另一个REST服务。
我的错误发生在第二步。我无法消费其他服务。我有一个从OncePerRequestFilter扩展的自定义过滤器，甚至没有被调用。在角度应用程序中，我收到一条我之前报告过的消息：
预检的响应无效（重定向）
正如我在之前的编辑中所说的那样。我不理解，因为第一个REST服务被调用，但第二个没有。我都不明白为什么我的自定义过滤器没有被调用。我认为我从angular app中调用了错误。
我的代码：
自定义过滤器：
public class JwtAuthenticationTokenFilter extends OncePerRequestFilter {
private final Log logger = LogFactory.getLog(this.getClass());
@Autowired
private UserDetailsService userDetailsService;
@Autowired
private JwtTokenUtil jwtTokenUtil;
@Value("${jwt.header}")
private String tokenHeader;
static final String ORIGIN = "Origin";
@Override
//@CrossOrigin(origins = "*")
protected void doFilterInternal(HttpServletRequest request, HttpServletResponse response, FilterChain filterChain)
throws ServletException, IOException {
// TODO Auto-generated method stub
logger.info("checking authentication für user ");
String authToken = request.getHeader(this.tokenHeader);
// authToken.startsWith("Bearer ")
// String authToken = header.substring(7);
String username = jwtTokenUtil.getUsernameFromToken(authToken);
if (username != null && SecurityContextHolder.getContext().getAuthentication() == null) {
// It is not compelling necessary to load the use details from the database. You could also store the information
// in the token and read it from it. It's up to you ;)
UserDetails userDetails = this.userDetailsService.loadUserByUsername(username);
// For simple validation it is completely sufficient to just check the token integrity. You don't have to call
// the database compellingly. Again it's up to you ;)
if (jwtTokenUtil.validateToken(authToken, userDetails)) {
UsernamePasswordAuthenticationToken authentication = new UsernamePasswordAuthenticationToken(userDetails, null, userDetails.getAuthorities());
authentication.setDetails(new WebAuthenticationDetailsSource().buildDetails(request));
logger.info("authenticated user " + username + ", setting security context");
SecurityContextHolder.getContext().setAuthentication(authentication);
}
}
filterChain.doFilter(request, response);
}
}
角度控制器和服务：
import { Component, OnInit } from '@angular/core';
import { LoginService } from './login.service';
interface TokenJson {
token: string;
}
@Component({
selector: 'login',
templateUrl: 'login.component.html',
styleUrls: ['login.scss'],
providers: [LoginService]
})
export class LoginComponent implements OnInit {
private model = {'username':'****', 'password':'****'};
private currentToken:string ;
private tokenJson: TokenJson;
// constructor
constructor(private _loginService: LoginService) {
}
// on-init
ngOnInit() {
debugger;
this._loginService.sendCredential(this.model).subscribe(
data => {
debugger;
//localStorage.setItem("token", JSON.parse(JSON.stringify(data)).token);
// this.currentToken = JSON.parse(JSON.stringify(data))._body;
this.tokenJson = JSON.parse(JSON.stringify(data))._body;
this.currentToken = JSON.parse(JSON.parse(JSON.stringify(data))._body).token;
localStorage.setItem("token", this.currentToken);
this._loginService.sendToken(localStorage.getItem("token")).subscribe(
data => {
//this.currentUserName=this.model.username;
//localStorage.setItem("currentUserName", this.model.username);
debugger;
this.model.username='';
this.model.password='';
},
error => {
debugger;
console.log(error)
}
);
},
error => {
debugger;
console.log(error)
}
);
}
}
import {Injectable} from "@angular/core";
import {Http, Headers, Response, RequestOptions} from '@angular/http';
import {Observable} from 'rxjs/Observable';
@Injectable()
export class LoginService {
token: string;
constructor (private http: Http) {}
sendCredential(model) {
debugger;
let tokenUrl1 = "http://localhost:8080/auth";
let headers = new Headers();
headers.append('Content-Type', 'application/json');
return this.http.post(tokenUrl1, JSON.stringify(model), {headers: headers});
}
sendToken(token) {
debugger;
let tokenUrl2 = "http://localhost:8080/users";
console.log('Bearer '+token);
let getHeaders2 = new Headers();
getHeaders2.append('Authorization', token);
let headers = new Headers();
headers.append('authorization', token);
return this.http.post(tokenUrl2, {}, options);
}
}
解
我发现了问题。获得类型OPTIONS请求的错误消息。我只避免那种类型的请求。我将以下配置添加到安全配置类：
@Configuration
@EnableWebSecurity
@EnableGlobalMethodSecurity(prePostEnabled = true)
public class SecurityConfig extends WebSecurityConfigurerAdapter {
//
@Override
public void configure(WebSecurity web) throws Exception {
web.ignoring().antMatchers(HttpMethod.OPTIONS, "/**");
}
//
}
PD：我是从here
引导的答案 0 :(得分：1)
Response for preflight is invalid (redirect)
这听起来更像是您的服务器无法正确处理飞行前请求。
您使用的是CORS吗？ （即您使用ng serve运行Angular应用程序，但尝试访问其他端口/计算机上的服务器？）。
因为根据您收到的错误，我认为您的后端服务器并未设置为正确处理CORS。
答案 1 :(得分：0)
let requestOptions = new RequestOptions({
headers: new Headers({
'Content-Type': 'application/json'
}),
method: RequestMethod.Post,
body: {}
});
this.http.request("http://localhost:8080/users", requestOptions)
.map((response: Response) => response.json())