在Angular 2的http.post中添加任何选项或头部会发送OPTIONS请求。
在Angular 2的http.post中添加任何选项或头部会发送OPTIONS请求。
我试图通过http.post()
将令牌信息发送回服务器。如果我从中删除选项,它会发送一个POST请求,但是如果我把它们添加回去,它会发送一个OPTIONS请求,服务器代码会拒绝。我也尝试删除\"withCredentials\"选项。\n我的身份验证服务如下:\n
import { Injectable, Inject } from '@angular/core'; import { Http, Headers, Response } from '@angular/http'; import { Observable } from 'rxjs'; import 'rxjs/add/operator/map' @Injectable() export class AuthenticationService { public token: string; constructor(@Inject(Http) private http: Http) { // 如果本地存储中有保存的令牌,则设置令牌 var currentUser = JSON.parse(localStorage.getItem('currentUser')); this.token = currentUser && currentUser.token; } login(username: string, password: string): Observable{; console.log("login..."); return this.http.post('http://localhost:8080/api/auth/login', JSON.stringify({ username: username, password: password })) .map((response: Response) => { // 如果响应中有jwt令牌,则登录成功 let token = response.json() && response.json().token; if (token) { // 设置令牌属性 this.token = token; // 将用户名和jwt令牌存储在本地存储中,以便在页面刷新之间保持用户登录状态 localStorage.setItem('currentUser', JSON.stringify({ username: username, token: token })); // 返回true表示登录成功 return true; } else { // 返回false表示登录失败 return false; } }); } logout(): void { // 清除令牌,并从本地存储中移除用户以登出 this.token = null; localStorage.removeItem('currentUser'); } }
\n这是我的Spring配置:\n
@SpringBootApplication public class SpringBootApp extends WebMvcConfigurerAdapter { private boolean workOffline = true; private boolean setupSchema = false; private IGraphService graphService; private DbC conf; @Autowired public SpringBootApp(IGraphService graphService, DbC conf) { this.graphService = graphService; this.conf = conf; } public static void main(String[] args) throws Exception { SpringApplication.run(SpringBootApp.class, args); } @Bean public Filter caseInsensitiveRequestFilter() { return new CaseInsensitiveRequestFilter(); } @Override public void configureDefaultServletHandling(DefaultServletHandlerConfigurer configurer) { configurer.enable(); } @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("http://localhost:3000") .allowedMethods("GET", "PUT", "POST", "DELETE","OPTIONS"); } @Bean public FilterRegistrationBean corsFilter() { UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); CorsConfiguration config = new CorsConfiguration(); config.setAllowCredentials(true); config.addAllowedOrigin("http://localhost:3000"); config.addAllowedHeader("*"); config.addAllowedMethod("*"); source.registerCorsConfiguration("/**", config); FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source)); bean.setOrder(0); return bean; } }
\n我真的不知道该怎么办,因为我遵循了Angular2 OPTIONS method sent when asking for http.GET中所说的,并且这不是预检请求。我之前遇到过与错误的内容类型相关的问题。
中文翻译:
使用http post方法时,向请求头中添加任何选项或标头都会发送OPTIONS请求。
问题原因:
该问题的原因是在发送http post请求时,向请求头中添加了额外的选项或标头。这会触发浏览器发送一个OPTIONS请求,以确定服务器是否允许跨域请求。
解决方法:
要解决这个问题,可以尝试以下几种方法:
1. 检查服务器配置:
确保服务器允许跨域请求。可以通过在服务器的响应头中添加"Access-Control-Allow-Origin"字段来实现。例如,如果你的前端应用程序部署在http://localhost:4200,并且你的服务器部署在http://localhost:3000,你可以在服务器的响应头中添加以下字段:
"Access-Control-Allow-Origin: http://localhost:4200"
2. 使用代理:
如果服务器不允许跨域请求,你可以考虑在本地设置一个代理服务器,将请求转发到服务器。这样可以绕过浏览器发送OPTIONS请求的限制。可以使用Angular CLI提供的proxy配置选项来配置代理。在项目的根目录下创建一个proxy.conf.json文件,内容如下:
{
"/api/*": {
"target": "http://localhost:3000",
"secure": false,
"logLevel": "debug",
"changeOrigin": true
}
}
然后在package.json文件中的"scripts"部分添加以下命令:
"start": "ng serve --proxy-config proxy.conf.json"
运行"npm start"命令启动应用程序时,代理配置将生效。
3. 改变请求方法:
如果你不需要向请求头中添加额外的选项或标头,你可以考虑改变请求方法。例如,将http post改为http get,不再添加额外的选项或标头。
通过检查服务器配置、使用代理或改变请求方法,你可以解决在Angular 2中使用http post请求时发送OPTIONS请求的问题。这些解决方法可以帮助你处理跨域请求的限制。
问题的原因是由于不正确的CORS实现和缺少Content-Type头部导致的。解决方法是正确实现CORS并在请求中添加Content-Type头部。
在这个例子中,问题的解决方法是通过在请求中添加Content-Type头部,这是真正需要的。
代码中的解决方法是在EntityService类的构造函数中创建一个Headers对象,并将Content-Type头部设置为'application/json'。然后,通过使用这个Headers对象创建一个RequestOptions对象,并将其传递给http.post或http.put方法来发送POST或PUT请求。这样做可以正确地发送请求并解决问题。
需要注意的是,还可以根据需要添加其他头部,如X-Authorization头部。同时,还可以根据具体情况修改请求的URL和实体数据。
总之,解决这个问题的关键是正确实现CORS并在请求中添加正确的头部信息。
在Angular 2中使用http.post发送请求时,如果想要添加自定义的选项或头部信息,会导致浏览器发送OPTIONS请求。这个问题的出现原因是因为浏览器自身发起了OPTIONS请求,与Angular没有任何关系。解决方法是需要配置服务器以正确响应OPTIONS请求,或确保Angular应用程序从与请求相同的服务器(同一端口)加载。如果浏览器发送OPTIONS而不是POST,可以返回空。只有在OPTIONS之后,浏览器才会发送POST请求。需要在服务器端返回CORS头部“AccessControlAllowXxx”。具体错误信息可以在浏览器控制台中查看,如果缺少响应OPTIONS请求的正确头部信息,会显示相应错误。