在Angular 2的http.post中添加任何选项或头部会发送OPTIONS请求。

22 浏览
0 Comments

在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中所说的,并且这不是预检请求。我之前遇到过与错误的内容类型相关的问题。

0
0 Comments

中文翻译:

使用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请求的问题。这些解决方法可以帮助你处理跨域请求的限制。

0
0 Comments

问题的原因是由于不正确的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并在请求中添加正确的头部信息。

0
0 Comments

在Angular 2中使用http.post发送请求时,如果想要添加自定义的选项或头部信息,会导致浏览器发送OPTIONS请求。这个问题的出现原因是因为浏览器自身发起了OPTIONS请求,与Angular没有任何关系。解决方法是需要配置服务器以正确响应OPTIONS请求,或确保Angular应用程序从与请求相同的服务器(同一端口)加载。如果浏览器发送OPTIONS而不是POST,可以返回空。只有在OPTIONS之后,浏览器才会发送POST请求。需要在服务器端返回CORS头部“AccessControlAllowXxx”。具体错误信息可以在浏览器控制台中查看,如果缺少响应OPTIONS请求的正确头部信息,会显示相应错误。

0