没有'Access-Control-Allow-Origin'Angular-> SpringBoot

Question

我正在尝试将Angular2一站式服务称为SpringBoot，但是当我打电话给我时，出现此错误：

在SpringBoot中，我有：

package com.service.configure;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.ComponentScan;
import org.springframework.context.annotation.Configuration;
import org.springframework.http.HttpMethod;
import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.builders.WebSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.security.config.http.SessionCreationPolicy;

@Configuration
@EnableWebSecurity
@ComponentScan(basePackages = "com.service")
public class ServiciosConfig  extends WebSecurityConfigurerAdapter {

    @Override
    public void configure(WebSecurity web) throws Exception {
        web.ignoring().antMatchers(HttpMethod.OPTIONS);
    }

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.csrf().disable();
        http.authorizeRequests().antMatchers("/").permitAll().anyRequest().authenticated().and().httpBasic().and()
                .sessionManagement().sessionCreationPolicy(SessionCreationPolicy.STATELESS); 
    }


    @Autowired
    public void configureGlobal(AuthenticationManagerBuilder auth) throws Exception {
         auth.inMemoryAuthentication().withUser("admin").password("admin").roles("USER");

    } 

}

在Angular2中：

private fetchData() {
        const url = 'http://localhost:8080/pg/get';
        this.service.fetchData(url).subscribe(
            data => {
                console.log('mis datos ', data);
                this.headers = data[0].headers;
                this.params = data[1].params;
            });
    }
 public fetchData(url: string): Observable<any> {
    let headers = new Headers();
    headers.append("Authorization", "Basic YWRtaW46YWRtaW4=");
    return this.http.get<Object[]>(url);
  }

如果我放http://localhost:8080/pg/get，我可以得到数据=）。

但是如果我尝试使用Angular是不可能的...

我的朋友使用了“邮递员”，他收到了数据

邮递员代码：

var settings = {
  "async": true,
  "crossDomain": true,
  "url": "http://myIp:8080/pg/get",
  "method": "GET",
  "headers": {
    "Authorization": "Basic YWRtaW46YWRtaW4=",
    "Cache-Control": "no-cache",
    "Postman-Token": "e1225c81-8cb0-4809-9a2a-c82776793906"
  }
}

$.ajax(settings).done(function (response) {
  console.log(response);
});​

我的控制器：

@RestController
@RequestMapping(value={"/pg"})
@CrossOrigin
public class PgController {

    @Autowired
    PgService pgRepository;

    @RequestMapping(method=RequestMethod.GET,value="/", produces = MediaType.APPLICATION_JSON_VALUE)
    String home() {
        return "¡Servicio configuración!";
    }


    @RequestMapping(method=RequestMethod.GET,value="/get", produces = MediaType.APPLICATION_JSON_VALUE)
    public List<tp_parametros_generales> getAllParameters() {
        List<tp_parametros_generales> tasks = pgRepository.getPg();
        return tasks;
    }
}

Answer 1

对于开发，您可以添加：

@CrossOrigin()

您的控制器的注释。应该可以。

Answer 2

在Controller类上使用@CrossOrigin批注，或者您可以创建一个配置文件来启用CrossOrigin。

Answer 3

另一种方法是使用angular-cli的/ webpack-dev-servers代理支持。

https://github.com/angular/angular-cli/wiki/stories-proxy

这样，您可以将角度http://localhost:4200/pg映射到您的Spring Boot服务器。 而且由于它们现在位于同一域中，因此您不会遇到任何跨域问题。

然后，当您上线时，使用nginx代理执行相同的操作。

Answer 4

我可以解决

public class ServiciosConfig  extends WebSecurityConfigurerAdapter {


        @Override
        protected void configure(HttpSecurity http) throws Exception {
            http.cors();
        }

        @Bean
        CorsConfigurationSource corsConfigurationSource() {
            UrlBasedCorsConfigurationSource source = new
                    UrlBasedCorsConfigurationSource();
            source.registerCorsConfiguration("/**", new CorsConfiguration().applyPermitDefaultValues());
            return source;
        }

    }