Auth0和React的CORS問題

Question

我目前正在嘗試在我的NodeJS + React App中實現Auth0。 雖然我有一個很大的問題，但本教程非常有用且有用。 每當我嘗試通過Auth0登錄/注冊時，我都會得到

XMLHttpRequest無法加載https://XYZ.eu.auth0.com/usernamepassword/login 。 對預檢請求的響應未通過訪問控制檢查：請求的資源上不存在“Access-Control-Allow-Origin”標頭。 因此不允許來源' http：// localhost：3000 '訪問。 對預檢請求的響應未通過訪問控制檢查：請求的資源上不存在“Access-Control-Allow-Origin”標頭。 因此不允許來源' http：// localhost：3000 '訪問。

所以我粗略地理解這意味着什么。 但我只是不知道在哪里設置所需的選項以允許此請求到Auth0。 在服務器端？ 在瀏覽器代碼中？

最好的祝福

---

編輯：正如RodrigoLópezDato指出的那樣，我可以在我的應用程序中編寫Origins： https ： //manage.auth0.com/#/applications

我在本地開發時應該把它放在那里？ 我的IP？

Answer 1

如果您在本地開發，則可以將要轉發的URL重定向到。 例如，如果您在端口4000上運行本地主機，並且想要重定向到名為/callback的路由，則可以執行以下操作：

http://localhost:4000/callback

在那個領域。

Answer 2

Auth0需要知道您的應用程序允許的起源和回調URL。 您可以在儀表板的應用程序設置中對其進行配置： https ： //manage.auth0.com/#/applications

Answer 3

只是為了詳細說明服務器端，因為你提到你正在構建一個node.js應用程序。 我假設你也在使用快遞。 要處理CORS請求，您可以執行以下操作：

在您的快速服務器文件中，您可以將本地主機設置為客戶端React應用程序之外的其他應用程序，該應用程序很可能在localhost：3000上運行。

var port = normalizePort(process.env.PORT || '5000');
app.set('port', port);

然后安裝cors npm包並在主express文件中初始化它。

var app = express();
app.use(cors());

然后，您所要做的就是在客戶端React package.json文件中設置代理。

  },
  "proxy": "http://localhost:5000"
}

然后，您可以同時運行node.js / express服務器和React應用程序，並使用您的快速服務器通過客戶端與代理進行React請求。

希望這會有所幫助。