Cors Policy Angular

Question

在从angular发送auth header jwt令牌时遇到了以下问题。从源'http://localhost:4200'访问'http://localhost:52278/api/user/signup'的XMLHttpRequest已被CORS策略阻止:请求的资源上没有'Access- control - allow - origin '标头。

。网络核心

var origins = Configuration["CorsUrl"].Split(",");
services.AddCors(options =>
{
options.AddPolicy("BasePolicy",
builder =>
{
builder
.AllowAnyMethod()
.WithOrigins(origins)
.AllowAnyHeader()
.AllowCredentials()
.AllowAnyMethod();
});
});

app.UseAuthorization();
app.UseCors("BasePolicy");
app.UseHttpsRedirection();

角:

signUpAdmin(data: AdminSignUpModel) {
return this.httpClient.post('user/signup', data,this.getCommonOptions());
}

private _token: string = localStorage.getItem('auth_token');
protected getCommonOptions() {
const httpOptions = {
headers: new HttpHeaders({
'Content-Type': 'application/json',
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': '*',
Authorization: `Bearer ${this._token}`,

})
};
return httpOptions;
}

Answer 1

从源'http://localhost:4200'访问'http://localhost:52278/api/user/signup'的XMLHttpRequest已被CORS策略阻止:请求的资源上没有'Access- control - allow - origin '标头。

要排除问题，请尝试在代码中指定允许的来源，而不是从配置设置中获取数据，如下所示。

services.AddCors(options =>
{
options.AddPolicy("BasePolicy",
builder =>
{
builder
.AllowAnyMethod()
.WithOrigins("http://localhost:4200", "https://localhost:44336") 
.AllowAnyHeader()
.AllowCredentials()
.AllowAnyMethod();
});
});

请注意，指定的URL不能包含尾斜杠(/)，例如http://localhost:4200/。

请修改代码，将UseCors方法调用在UseRouting之后，UseAuthorization之前。

app.UseRouting();
//...
app.UseCors("BasePolicy");
app.UseAuthorization();

有关在ASP中启用CORS的更多信息。. NET Core，请查看此文档:

https://learn.microsoft.com/en us/aspnet/core/security/cors?view=aspnetcore - 5.0 # cors-with-named-policy-and-middleware

Answer 2

那么你的Angular CLI开发服务器运行在http://localhost:4200上，你想要访问运行在http://localhost:52278上的服务器为angular中的API调用设置一个代理。

创建Angular PROXY

1. 在Angular CLI项目的根目录下创建一个文件proxy.conf.json。

   内容应该如下所示

{
"/api/*": {
"target": "http://localhost:52278",
"secure": false,
"logLevel": "debug",
"changeOrigin": true
}
}

现在从我们的应用程序中向/api/...发出的所有请求都将转发到http://localhost:52278/api/....

2. 配置angular。在指向src/proxy.conf文件的architect>serve>选项下使用proxyConfig键。

"architect": {
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
"browserTarget": "your-application-name:build",
"proxyConfig": "src/proxy.conf.json"
},

3. 现在，只需运行ng serve，您就完成了。

注:这不是用于生产

对于你的生产环境，还有其他更复杂的解决方案，无论是将你的应用直接部署到"后端应用"中，还是通过Apache 2或Nginx提供服务。