angular - 访问“http://....”源“http://localhost:4200”的 XMLHttpRequest 已被 CORS 策略阻止
问题描述
我正在尝试调用一个我遇到 CORS 错误的 api。
当我尝试使用“https://....”时,我遇到了以下错误,服务失败。
状态码:422。
选项https://xyz/login?username=xxx&password=xxx 422(无法处理的实体)从源“ http://localhost:4200 ”访问“ https://xyz/login?username=xxx&password=xxx ”处的 XMLHttpRequest被 CORS 策略阻止:对预检请求的响应未通过访问控制检查:请求的资源上不存在“Access-Control-Allow-Origin”标头。
当我尝试使用“http://....”时,出现以下错误。
状态码:307 临时重定向
从源“ http://localhost:4200 ”访问“ http://xyz/login?username=xxx&password=xxx ”的 XMLHttpRequest已被 CORS 策略阻止:对预检请求的响应未通过访问控制检查:重定向不允许用于预检请求。
我尝试添加标题,但添加的标题不会显示在浏览器上。
请求标头如下所示:
显示临时标头 Access-Control-Request-Headers: content-type 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, like Gecko) Chrome/76.0.3809.132 Safari/537.36
请帮我解决问题,
我的 component.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
解决方案
从 localhost 开发时,CORS 问题很常见。您有一些选项可以解决此问题:
1)如果您可以控制您的服务器,请将此标头添加到响应中:
Access-Control-Allow-Origin: *
2) 如果您不拥有带有端点的服务器,请安装此 chrome 扩展程序。这将添加标头并允许本地主机请求。
3) 如果您不使用 chrome 或者如果您想在代码中使用代理,请使用此代理。你的网址最终会是这样的:
https://crossorigin.me/http://xyz/login?username=xxx&password=xxx
推荐阅读
- dotnetnuke - 如何为 dnn9 模板创建设置部分?
- javascript - 在我的团队使用 React + Javascpript 时使用 React + Typescrpt
- javascript - 防止覆盖样式更改 css 集样式
- swift - 检测面部向上/向下看的视觉框架
- c++ - 为什么我开始在 C++ 中收到 'max': identifier not found 错误?
- javascript - 搜索/过滤功能 javascript 不起作用
- c++ - util-linux/lsblk :: 如何使用 api/include
- c# - 在同一解决方案中使用 EFCore 2 和 EFCore 3。项目没有使用正确的版本
- google-cloud-firestore - 如果 ID 存在,则在创建文档时抛出错误 - Firestore
- reactjs - 如何在发送 API 请求期间显示加载指示器