Question

在login.service.ts中，我有一个名为getStudent（）的方法，在其中我将JWT标记设置为标题并访问后端（Spring引导）。但是，我总是收到标题丢失的消息。这是我的代码： login.service.ts

import { Injectable } from '@angular/core';
import { Http, HttpModule, Response } from '@angular/http';
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Observable';
import { Subject } from 'rxjs/Subject';
import { ConnectionService } from './connection.service';
import { RequestOptions } from '@angular/http';
import { CookieService } from 'ngx-cookie-service';

declare var $: any;
@Injectable()
export class LoginService {
  private loginState = new Subject<any>();
  public headers: any;


  constructor(private http: Http, private connectionLink: ConnectionService, private cookie:CookieService) {
   }

  getStudent(id: string) {
    let options:any = new RequestOptions();
    let headers: any = new Headers();
    headers.append('Content-Type', 'application/json');
    headers.append('Authorization', 'Bearer ' + this.cookie.get('token'));
    options = new RequestOptions({ headers: headers });

    return this.http.get('http://localhost:8080/getStudentinfoByIDREST/'+id,options)
    .toPromise()
    .then(res =>res.json())
  }
}

这是后端的CorsConfig.java：

import org.springframework.boot.context.embedded.FilterRegistrationBean;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter;

@Configuration
public class CorsConfig {

    @Bean
    public FilterRegistrationBean corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        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);
        final FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
        bean.setOrder(0);
        return bean;
    }

    @Bean
    public WebMvcConfigurer mvcConfigurer() {
        return new WebMvcConfigurerAdapter() {
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**").allowedMethods("GET", "PUT", "POST", "GET", "OPTIONS");
            }
        };
    }
}

我确定我的后端正常工作，因为我使用Postman测试了很多次。因此，我认为我的代码存在问题。请帮帮我，谢谢！

Answer 1

我觉得服务器配置有问题。

“请求的资源上没有'Access-Control-Allow-Origin'标头”表示您发出请求的地方（此处为localhost：4200）不允许访问您的API。

也许您可以尝试在您请求的api端点中使用@CrossOrigin注释。此注释允许带注释的端点上的所有原点。通过这种方式，您将看到这是否真的是您的配置问题。

希望有所帮助

Answer 2

将此附加到标题中 headers.append('Access-Control-Allow-Origin' , '*');
因为这是来自cors的错误

无法在Angular 4

2 个答案: