сообщение об ошибке в гугл хромПри попытке удалить элемент я получаю сообщение об ошибке.
Когда я добавил весеннюю безопасность в свой бэкэнд, я столкнулся с проблемой csrf и не смог отобразить мои данные из базы данных в Angular. Итак, я сделал несколько шагов:
Я добавил @WebSecurityConfigurerAdapter
в свой бэкенд. Позже установил Interceptor в Angular, и после этого я смог загрузить свои данные, используя Spring Security в фоновом режиме.
@EnableWebSecurity
@Configuration
public class SpringSecurity extends WebSecurityConfigurerAdapter {
@Override
protected void configure(HttpSecurity http) throws Exception {
http
.csrf().disable()
.authorizeRequests()
.antMatchers(HttpMethod.OPTIONS,"/**").permitAll()
.anyRequest().authenticated()
.and()
//.formLogin().and()
.httpBasic();
}
}
Угловая часть моего сервиса с Interceptor
import { Injectable } from '@angular/core';
import {HttpHandler, HttpInterceptor, HttpRequest} from '@angular/common/http';
@Injectable({
providedIn: 'root'
})
export class HttpInterceptorService implements HttpInterceptor {
intercept(request: HttpRequest<any>, next: HttpHandler) {
const username = 'damian';
const password = 'damian';
const basicAutHeaderString = 'Basic ' + window.btoa(username + ':' + password);
request = request.clone(
{
setHeaders: {
Authorization: basicAutHeaderString
}
}
);
return next.handle(request);
}
constructor() { }
}
Получение одного элемента из бэкэнда:
deleteSingleTodo(id) {
return this.http.delete<Todo>(`http://localhost:8081/${id}`);
}
Мой метод удаления, который запускается кнопкой (щелчок):
deleteTodo(id) {
console.info(`delete todo ${id}` )
this.getDataService.deleteSingleTodo( id).subscribe (
response => {
console.info(response);
this.message = `Delete of Todo ${id} Successful!`;
this.refreshTodos();
}
);
}
I also provided HTTP_INTERCEPTORS in app.module.ts
providers: [
{ provide: HTTP_INTERCEPTORS, `useClass: HttpInterceptorService, multi:` true}
],[my error message in google][1]
Хорошо, спасибо за совет. У меня есть заголовки до того, как я установил Interceptor. Теперь, когда я использую Interceptor, он должен быть виден во всем приложении, но работает только получение всех элементов из базы данных. Я новичок в этом мире полного стека.
Можете ли вы просто добавить фильтр для применения CORS, как показано ниже, чтобы увидеть, работает ли он?
@Component
public class CrossOriginFilter implements Filter {
private static final Logger log = LoggerFactory.getLogger(CrossOriginFilter.class);
@Override
public void init(FilterConfig filterConfig) throws ServletException {
// Called by the web container to indicate to a filter that it is being
// placed into service.
// We do not want to do anything here.
}
@Override
public void doFilter(ServletRequest req, ServletResponse resp, FilterChain chain) throws IOException, ServletException {
log.info("Applying CORS filter");
HttpServletResponse response = (HttpServletResponse) resp;
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Allow-Methods", "GET, POST, PATCH, PUT, DELETE, OPTIONS");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "Origin, Authorization, X-Requested-With, Content-Type, Accept, X-Auth-Token, X-CSRF-TOKEN");
chain.doFilter(req, resp);
}
@Override
public void destroy() {
// Called by the web container to indicate to a filter that it is being
// taken out of service.
// We do not want to do anything here.
}
}
Вам просто нужно добавить класс ниже в качестве конфигураций CORS.
Как это работает?
Запросы CORS автоматически отправляются различным зарегистрированным объектам HandlerMapping. Они обрабатывают предварительные запросы CORS и перехватывают простые и фактические запросы CORS с помощью реализации CorsProcessor (по умолчанию DefaultCorsProcessor) для добавления соответствующих заголовков ответов CORS (таких как Access-Control-Allow-Origin).
CorsConfiguration позволяет указать, как должны обрабатываться запросы CORS: допустимые источники, заголовки и методы среди прочего. Это может быть обеспечено различными способами
КОРС-документCORS с Spring Boot
import javax.servlet.Filter;
import javax.servlet.FilterChain;
import javax.servlet.ServletRequest;
import javax.servlet.ServletResponse;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
@EnableWebMvc
public class WebConfig implements Filter,WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**");
}
@Override
public void doFilter(ServletRequest req, ServletResponse res, FilterChain chain) {
HttpServletResponse response = (HttpServletResponse) res;
HttpServletRequest request = (HttpServletRequest) req;
System.out.println("WebConfig; "+request.getRequestURI());
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST, PUT, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Allow-Headers", "Content-Type, Access-Control-Allow-Headers, Authorization, X-Requested-With,observe");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Expose-Headers", "Authorization");
response.addHeader("Access-Control-Expose-Headers", "responseType");
response.addHeader("Access-Control-Expose-Headers", "observe");
System.out.println("Request Method: "+request.getMethod());
if (!(request.getMethod().equalsIgnoreCase("OPTIONS"))) {
try {
chain.doFilter(req, res);
} catch(Exception e) {
e.printStackTrace();
}
} else {
System.out.println("Pre-flight");
response.setHeader("Access-Control-Allow-Origin", "*");
response.setHeader("Access-Control-Allow-Methods", "POST,GET,DELETE,PUT");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "Access-Control-Expose-Headers"+"Authorization, content-type," +
"USERID"+"ROLE"+
"access-control-request-headers,access-control-request-method,accept,origin,authorization,x-requested-with,responseType,observe");
response.setStatus(HttpServletResponse.SC_OK);
}
}
}