本系列之前的文章:

上一篇中,遇到了Angular程序没法正常访问API的问题,这时候就需要修改API,让它能接受Angular 程序,Knowledge Builder,的访问。

首先,在Startup.cs中,在ConfigureServices中,定义了一个名叫TEST的CORS Policy,并在该Policy指明接受端口4200:

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

这里接受了4200端口,因为Knowledge Builder程序默认使用了4200端口。

在angular.json中,可以修改Angular 程序的端口为4201,这时候,上述函数中的端口也要相应的修改为4201:

    "serve": {
        "builder": "@angular-devkit/build-angular:dev-server",
        "options": {
            "browserTarget": "knowledgebuilder:build",
            "port": 4201,
            "host": "localhost"
        },
        "configurations": {
            "production": {
                "browserTarget": "knowledgebuilder:build:production"
            }
        }
    },

然后,在Startup.cs中,继续修改Configure函数:

    app.UseCors("TEST");

这时候,再次运行Knowledge Builder程序,API已经可以访问了。

下一篇将完善List View,使得页面能够从API获取真实数据。

是为之记。
Alva Chien
2020.07.16
更新于 2020.12.17