VUE中的CORS問題是由於前端和後端域不同時瀏覽器的相同原始政策而發(fā)生的。在開發(fā)過程中，在vue.config.js中配置代理以通過開發(fā)服務(wù)器重定向API請求。在生產(chǎn)中，確保後端設(shè)置適當?shù)腃ORS標頭，允許特定的起源，而不是使用通配符進行安全性。一些部署平臺還支持邊緣功能，以避免CORS通過在同一域上託管API。將環(huán)境變量用於API URL，並使用Postman等工具獨立測試後端端點。

CORS（Cros-Origin資源共享）是一種機制，允許或限制Web應(yīng)用程序?qū)⒄埱笈c服務(wù)應(yīng)用程序的域提出不同的域。這在VUE開發(fā)中很重要，因為大多數(shù)VUE應(yīng)用程序都是與API通信的前端客戶，可以託管在另一個領(lǐng)域。

是什麼原因?qū)е翪ORS問題？

當使用Vue CLI或VITE等工具開發(fā)VUE應(yīng)用程序時，您經(jīng)常在localhost:8080或類似的情況下運行開發(fā)服務(wù)器，而您的API可能會在localhost:3000或其他域。出於安全原因，瀏覽器執(zhí)行相同的原始策略，這意味著如果域，端口或協(xié)議在前端和後端之間有所不同，則瀏覽器將阻止請求，除非服務(wù)器明確允許。

這是瀏覽器控制臺中的錯誤，例如：

被CORS策略阻止：沒有“訪問控制”標頭。

這不是您的VUE代碼中的錯誤 - 它是瀏覽器強制的安全措施。

在開發(fā)過程中，您如何處理CORS？

在開發(fā)過程中，您可以使用VUE項目中配置的代理圍繞CORS限制進行工作。在VUE CLI中，這是通過vue.config.js文件完成的。以下是：

 // vue.config.js
Module.exports = {
  DevServer：{
    代理人： {
      '/api'：{
        目標：'http：// localhost：3000'，
        變換：是的，
        pathrewrite：{'^/api'：''}
      }
    }
  }
}

使用此設(shè)置：

• 對您的VUE應(yīng)用程序中/api的任何請求都將重定向到http://localhost:3000 。
• 瀏覽器將請求視為來自相同原點的請求，因為它首先擊中了開發(fā)服務(wù)器。
• 這僅在開發(fā)過程中起作用 - 它不會影響生產(chǎn)構(gòu)建。

當您的後端尚未設(shè)置以允許交叉原始請求時，這是一個常見而有效的解決方法。

處理生產(chǎn)中的COR呢？

在生產(chǎn)中，代理方法將不再起作用。此時，您需要後端才能正確配置CORS標題。例如，Node.js Express Server可以允許這樣的交叉原始請求：

 app.use（（（req，res，next）=> {
  res.header（'access-control-wall-allow-origin'，'*'）;
  res.header（“訪問控制 - 允許頭”，“原點，x-請x-請X-Rquested，content-type，cackect'）;
  下一個（）;
}）;

但是，對於實際應(yīng)用程序，允許所有起源（ * ）可能並不安全。您需要指定確切的允許域。

如果您將VUE應(yīng)用程序部署到NetLify或Vercel之類的服務(wù)中，則無法直接控制服務(wù)器標頭。因此，再次，後端必須正確支持CORS。

此外，一些雲(yún)提供商提供邊緣功能或無服務(wù)器功能，使您可以在與Vue應(yīng)用程序同一域上創(chuàng)建API端點，從而有效地避免了CORS問題。

一些小技巧

• 使用環(huán)境變量來管理API URL，因此在開發(fā)和產(chǎn)品之間切換更容易。
• 諸如Postman或Curl之類的工具不受COR的影響 - 可直接測試後端響應(yīng)。
• 前飛行請求（選項）是CORS的一部分。如果您的API對它們的響應(yīng)不正確，則瀏覽器甚至在發(fā)生之前會阻止實際請求。

基本上，與Vue中的CORS打交道不太重要，而更多地是關(guān)於如何設(shè)置後端以及如何配置開發(fā)環(huán)境。

以上是什麼是CORS，如何影響Vue的發(fā)展？的詳細內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！