Question

当我从客户端应用程序调用api方法时，出现以下错误。我正在使用dotnet core v2.1.6和dotnet sdk v2.1.502，而我的clinet应用程序正在使用Angular v5.2.0

访问“ http://localhost:5000/api/auth/login”处的XMLHttpRequest 来自来源“ http://localhost:4200”的信息已被CORS政策阻止：对预检请求的响应未通过访问控制检查：预检请求不允许重定向。

还附有此错误的图片。

通过在startup.cs中使用自定义cors策略尝试了不同的方法。我可以轻松地使用邮递员从api中获取数据，但是从客户端应用程序中获取数据并非如此。

我的Startup.cs函数：

public IConfiguration Configuration { get; }

        // This method gets called by the runtime. Use this method to add services to the container.
        public void ConfigureServices(IServiceCollection services)
        {
            services.AddDbContext<DataContext>(x => x.UseSqlite(Configuration.GetConnectionString("DefaultConnection")));
            services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
            services.AddCors(options => options.AddPolicy("CorsPolicy",
            builder =>
            {
                builder.AllowAnyHeader()
                       .AllowAnyMethod()
                       .SetIsOriginAllowed((host) => true)
                       .AllowCredentials();
            }));
            services.AddScoped<IAuthRepository, AuthRepository>();
            services.AddSignalR();
        }

        // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }
            else
            {
                app.UseHsts();
            }

            app.UseHttpsRedirection();
            //app.UseCors(x => x.WithOrigins("http://localhost:4200/").AllowAnyHeader().AllowAnyMethod().AllowAnyOrigin().AllowCredentials());
            app.UseMvc();
            app.UseCors("CorsPolicy");

        }

使用我的客户端应用程序中的此服务来验证输入数据：

export class AuthService {
    baseUrl = 'http://localhost:5000/api/auth/';
    userToken: any;
    //
    constructor(private http: Http) { }

    login(model: any) {
        const headers = new Headers({ 'content-type': 'application/json' });
        const options = new RequestOptions({ headers: headers });
        return this.http.post(this.baseUrl + 'login', model, options).map((response: Response) => {
            const user = response.json();
            if (user) {
                localStorage.setItem('token', user.tokenString);
            }
                this.userToken = user.tokenString;
        });
    }
}

Answer 1

由于要尝试访问其他域/端口中的端点，因此应configure a proxy用于角度应用程序。例如：

在项目根文件夹proxy.conf.json中创建一个文件。

示例内容：

{
  "/api": {
   "target": "http://localhost:3000",
   "secure": false
 }
}

在您的angular.json文件中，添加代理文件配置：

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

如果Angular版本为5或更低版本，则没有angular.json文件，您仍然可以将代理称为cli参数，例如：
```
"start": "ng serve --proxy-config proxy.conf.js"
```

通过CORS策略阻止了我从我的api处对XMLHttpRequest的访问

1 个答案: