Я пытаюсь вызвать API, где я застрял с ошибкой CORS.
, когда я попытался с "https: // ....", я столкнулся с следующей ошибкой с ошибкой службы.
Код состояния: 422.
ОПЦИИ https://xyz/login?username=xxx&password=xxx 422 (необработанный объект) Доступ к XMLHttpRequest по адресу https://xyz/login?username=xxx&password=xxx' из источника 'http://localhost:4200' имеетбыл заблокирован политикой CORS: Ответ на запрос предварительной проверки не проходит проверку контроля доступа: На запрошенном ресурсе отсутствует заголовок «Access-Control-Allow-Origin».
, когда я попытался с помощью «http: // .... "я получаю следующую ошибку.
код состояния: 307 Временное перенаправление
Доступ к XMLHttpRequest в 'http://xyz/login?username=xxx&password=xxx' из источника' http://localhost:4200' заблокирован политикой CORS: Ответ на запрос предполетной проверки не выполненне проходите проверку контроля доступа: перенаправление не разрешено для предварительного запроса.
Я попытался добавить заголовки, но добавленные заголовки не будут отображаться в браузере.
Заголовки запроса выглядят следующим образом:
Отображаются предварительные заголовки Access-Control-Request-Headers: тип содержимого Access-Control-Request-Method: POST Origin: http://localhost:4200 Referer: http://localhost:4200/login User-Agent:Mozilla / 5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit / 537.36 (KHTML, как Gecko) Chrome / 76.0.3809.132 Safari / 537.36
Пожалуйста, помогите мне решить проблему,
мой компонент.ts выглядит так
import { FormControl, FormGroup, FormGroupDirective, NgForm, Validators, FormBuilder } from '@angular/forms';
import { ErrorStateMatcher } from '@angular/material/core';
import { Router, ActivatedRoute } from '@angular/router';
import { first } from 'rxjs/operators';
import { AuthenticationService } from '../services';
@Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit{
loginForm: FormGroup;
returnUrl: string;
error = '';
constructor(
private formBuilder: FormBuilder,
private route: ActivatedRoute,
private router: Router,
private authenticationService: AuthenticationService) {}
ngOnInit() {
this.loginForm = this.formBuilder.group({
username: ['', [Validators.required , Validators.email]],
password: ['', [Validators.required]]
});
// get return url from route parameters or default to '/'
this.returnUrl = this.route.snapshot.queryParams['returnUrl'] || '/';
}
get f() { return this.loginForm.controls; }
onSubmit() {
this.authenticationService.login(this.f.username.value,
this.f.password.value)
.pipe(first())
.subscribe(
data => {
this.router.navigate([this.returnUrl]);
},
error => {
this.error = error;
});
}
}```
and my authentication.service.ts looks like this
``import { Injectable } from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';
import { map } from 'rxjs/operators';
import { Http, Headers, RequestOptions, Response, ResponseContentType } from '@angular/http';
@Injectable({ providedIn: 'root' })
export class AuthenticationService {
constructor(private http: HttpClient) { }
login(username: string, password: string) {
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Credentials': 'true'
})
};
return this.http.post(`https://xyz/login
username=xxx&password=xxx, httpOptions)
.pipe(map(user => {
if (user) {
// some logic
}
return user;
}));
}
}```
i want to resolve the CORS issue and make successful api call either from client side or from server side. Being fairly new to angular, any details/step by step instructions are appreciated.
Also , i would want to know why added headers wont show on browser. Am i missing anything