通過 Angular 啟用 CORS

Question

我正在使用 Angular 7，我應該構建一個前端，后端部署在 Heroku 上。 由於我無法編輯后端（顯然沒有啟用 CORS），我無法訪問任何 api，並且出現錯誤：

Access to XMLHttpRequest at ' http://ebit-front-test.herokuapp.com/register ' from origin ' http://localhost:4200 ' has been blocked by CORS policy: Response to preflight request doesn't pass access control check : 它沒有 HTTP ok 狀態。 register.service.ts:31

后端返回代碼 0，正文為：[object ProgressEvent]

有沒有辦法通過 Angular 啟用 CORS，或者避免這個問題。 我曾嘗試使用自定義代理配置，但效果不佳。

*這個問題與其他類似問題不同，因為他們實際上可以訪問他們的后端，而我必須在沒有訪問后端的情況下解決問題。

Answer 1

您可能想在 Angular 中設置本地代理。 在angular.json添加選項proxyConfig指向您的定義文件：

        "serve": {
          "builder": "@angular-devkit/build-angular:dev-server",
          "options": {
            "browserTarget": "your-client:build",
            "proxyConfig": "proxy.conf.json"
          },

並創建proxy.conf.json文件，例如：

{
  "/register": {
    "target": "http://ebit-front-test.herokuapp.com/register",
    "secure": false
  }
}

然后從客戶端調用 url 作為http.post('/register') 。 調整您的代理配置，使其捕獲所有 api 路由。

更多閱讀...

Answer 2

CORS 需要在服務器上配置為“真正的”應用程序，您希望非開發人員使用該應用程序。

但是，出於測試目的，您可以使用代理服務器來添加服務器應添加的標頭。

例如，參見https://elements.heroku.com/buttons/marcus2vinicius/cors-anywhere

Answer 3

對於遇到此問題的其他所有人，我找到了一種避免 CORS 錯誤的方法。 如果您在沒有 web 安全性的情況下運行 Chrome，則 CORS 錯誤將消失。

這不會啟用 CORS，所以它是一個臨時解決方案，如果您無法訪問您的后端，但需要開發前端。

在沒有 web 安全性的情況下運行的步驟：

1）以管理員身份運行命令提示符，並使用此命令殺死所有 Chrome 實例：

taskkill /F /IM chrome.exe

2) 使用以下命令運行禁用 web 安全性的新 Chrome 實例：

啟動 chrome https://teckangaroo.com/chrome-disable-web-security/ –disable-web-security –user-data-dir=”C:\teckangaroo.com”

應該這樣做！