CORS 在 Node JS Pug 模板中包含腳本時出錯

Question

我有一個使用 PUG 作為模板引擎的快速服務器。 我正在嘗試使用 cdn 添加 tailwind CSS，但我收到如下 cors 錯誤：

錯誤：CORS 策略已阻止從來源“http://localhost:3000”訪問“https://cdn.tailwindcss.com/”中的腳本：沒有“Access-Control-Allow-Origin”header請求的資源。

在我的哈巴狗模板中，這是我試圖包含腳本的基本文件：

html
  head
    block head
      meta(charset='UTF-8')
      meta(name='viewport' content='width=device-width, initial-scale=1.0')
      link(rel='stylesheet' href='/css/style.css')
      link(rel='shortcut icon' type='image/png' href='/img/favicon.png')
      link(rel='stylesheet' href='https://fonts.googleapis.com/css?family=Lato:300,300i,700')
      title A & N Tours | #{title}
  
  body
    // HEADER
    include _header
        
    // CONTENT
    block content
      h1 This is a placeholder heading
      
    // FOOTER
    include _footer
    
    script(src="https://js.stripe.com/v3/" crossorigin="") 
    script(src='/js/bundle.js')
    script(src="https://cdn.tailwindcss.com" crossorigin="" defer)

我的路線處理程序 function：

  const tours = await Tour.find().limit(3);
  res.status(200).render('homepage', {
    title: 'Home',
    topTours: tours
  })
});

Answer 1

您從 tailwindcss.com 請求的資源不帶有 CORS 標頭。 但是由於crossorigin=""屬性，瀏覽器需要它們。

如果省略此屬性，問題就會消失

script(src="https://cdn.tailwindcss.com" defer)

設置該屬性是否有特殊原因？

以下 HTML 頁面加載沒有問題：

<!DOCTYPE html><html>
<head>
  <script type="text/javascript" src="https://cdn.tailwindcss.com" defer>
  </script>
</head></html>

CORS 在 Node JS Pug 模板中包含腳本時出錯

問題描述

1 個解決方案

解決方案1
1 2022-04-24 09:46:47

CORS 在 Node JS Pug 模板中包含腳本時出錯

問題描述

1 個解決方案

解決方案1 1 2022-04-24 09:46:47

解決方案1
1 2022-04-24 09:46:47