1. 程式人生 > 實用技巧 >abp vnext 開發快速入門 4 跨域設定

abp vnext 開發快速入門 4 跨域設定

由於專案採用的微服務框架,前端與後端互動難免有跨域的問題。abp vnext實現跨域也很簡單,只需要設定幾處就可以了,這裡只講全域性的跨域,至於區域性的Action如何跨域請自行搜尋.netcore 跨域相關的知識。

1、修改appsettings.json 下的App:CorsOrigins節點,把前端的域名加進來。比如

"App": {
"CorsOrigins": "https://*.Test.com,http://localhost:4200,http://localhost:2213"
}

2、abp vnext 已經預設跨域的配置程式碼如下:

context.Services.AddCors(options =>
{
options.AddPolicy(DefaultCorsPolicyName, builder =>
{
builder
.WithOrigins(
configuration["App:CorsOrigins"]
.Split(",", StringSplitOptions.RemoveEmptyEntries)
.Select(o => o.RemovePostFix("/"))
.ToArray()
)
.WithAbpExposedHeaders()
.SetIsOriginAllowedToAllowWildcardSubdomains()
.AllowAnyHeader()
.AllowAnyMethod()
.AllowCredentials();
});
});

這樣除錯,前端就可以訪問了。

這樣就完了嗎。還沒說完呢,說一個我遇到的坑,就是我除錯時發現前端呼叫後端登入介面,後端用除錯模式或者用Debug啟動服務都沒問題。但是後端用Release啟動卻發現前端怎麼也調用不了。前端錯誤日誌提示不允許跨域,我當時就想我明明設定了啊,難道這塊Release與Debug哪裡不同的設定還?就搜尋全網各種資料都沒有解決。

然後我就冷靜思考下,我用restclient看看是否允許訪問介面。結果發現也不行,這時我就想可能不是跨域問題了,就去看後端日誌了,結果發現居然是配置的swagger的問題。預設除錯模式生成了xml檔案,但是到了Release下就沒有生成,這時呼叫介面發生了錯誤。於是把swagger改成只有在除錯開發環境下才使用的,這下問題就解決了。這塊沒少費我時間,這裡說出來,能給大家減少點時間浪費。

swagger 配置改成這樣

if (env.IsDevelopment())
{
app.UseSwagger();
app.UseSwaggerUI(options =>
{
options.SwaggerEndpoint("/swagger/v1/swagger.json", "Support APP API");
});
}

以上就說完了跨域相關的了。