點網核心 Web API 與 Javascript - Z5A8FEFF0B4BDE3EEC924Z 策略錯誤

Question

I am using Visual Studio code with liveserver for html/javascript, and using VS Studio 2019 for Dot net core Web API I have create site in IIS on Windows 10 locally for the web api.

1. 我有一個登錄頁面，接受用戶名和密碼。 這是在 login.html 中編碼的

登錄頁面有以下 javascript function，在登錄按鈕點擊事件中調用

function fnlogin() {
   window.location.href = "http://localhost:5500/productmenu.html"
}

2. 登錄后，將顯示一個菜單頁面。 這在 productmenu.html 中編碼，如下

<header>
   <ul class = "nav">
     <li class="navlink"> <a href="productInfo.html> target="content"> Product Information <a> <li?
     <li class="navlink"> <a href="orderHistory.html> target="content"> Order History <a> <li?
   </ul>
</header>

3. 用戶選擇菜單選項“產品信息”后，將顯示另一個 html 頁面 這在 productinfo.html 中編碼

4. Once the user enters product code and clicks on search, a dot net core web api is invoked and data is displayed in the productinfo.html using fetch api

api在JS中調用如下

fetch('http://localhost:8082/api/product/' + productId)
.then(response => response(json))
.then((response => {
    return response
})
.then ( (response) => {
    console.log(response);
   })
.catch(err => console.log(err));

5. 點網核心 web api 在 startup.cs 中有以下內容

method : configureServices

services.AddDefaultPolicy(
   options.AddDefaultPolicy (
      builder => 
      {
           builder.WithOrigins("http://127.0.0.1:5500)
            .AllowAnyHeader()
            .AllowAnyMethod()
            .AllowCredentials()
      })
)};

配置方法有以下

app.UseRouting();
app.UseCors();
app.UseAuthorization():

web api 發布在 IIS 現場，端口為 8082

問題如下

1. 當我直接在瀏覽器中測試 web api 時，它工作正常
2. 當我在實時服務器中運行 productmenu.html 時，會打開一個新的瀏覽器 window 並顯示鏈接 127.0.0.1:5500/productmenu.ZFC35FDC70D5FC69D269883A822C7A 和 5 一旦我 select “產品信息”菜單選項，頁面產品信息頁面被顯示。 輸入產品 ID 並單擊搜索按鈕后，將調用 web api，然后正確顯示產品信息。 沒有任何問題..
3. 但是，當我在 VS 代碼/實時服務器中運行 login.html 並使用相同的步驟（如 #2 中所述）導航到產品信息頁面並單擊搜索按鈕時，我在 Chrome 開發工具中出現 CORS 錯誤“ CORS 策略已阻止訪問從 .. 從源...

我檢查了 Chrome 開發工具中的網絡選項卡並查看請求標頭

Accept: */*
Host: localhost:8082
Origin: http://localhost:5500
Sec-Fetch-Dest: Empty
Sec-Fetch-Mode: cors
Sec-Fetch-Site : same-site

Answer 1

您在 Cors 語法中有一個錯誤。 這是默認策略的語法：

 services.AddCors(options =>
        {
       options.AddDefaultPolicy(
         builder => 
      {
           builder.WithOrigins("http://127.0.0.1:5500")
            .AllowAnyHeader()
            .AllowAnyMethod();
             });
        });

但如果它仍然不起作用，您可以嘗試用命名策略替換默認的 Cors 策略

public void ConfigureServices(IServiceCollection services)
        {
            services.AddCors(o => o.AddPolicy("AllowOrigins", builder =>
            {
                builder.WithOrigins("http://localhost:5500")
                       .AllowAnyMethod()
                       .AllowAnyHeader();
            }));

        .....
            
        }

        
        public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
        {
            .....

            app.UseRouting();
            app.UseCors("AllowOrigins");
           app.UseAuthorization();

            ....
         }