问题描述
我有一个使用Django后端的项目，使用Django Rest Framework提供API，并使用了Vue.js前端SPA使用API。身份验证期间遇到某种CORS问题。
我一直在使用mozilla-django-oidc与Okta实施授权码流程。这几乎可以立即使用，如果我在浏览器中导航到该API，则可以登录Okta，并获得Django会话。我还启用了DRF的SessionAuthentication，它允许SPA访问Django生成的相同会话Cookie（SPA和API都在同一个域中），前提是我首先直接通过API登录。直到id令牌过期，所有这些都可以正常工作。在Django中，当id令牌到期时，我将重定向到https://example.okta.com/oauth2/v1/authorize?...，授权代码流完成，然后继续发送到最初请求的页面。失败的地方是从SPA向API发出的带有过期ID令牌的Ajax请求。我得到了相同的重定向，但是这次由于CORS而失败。
Access to XMLHttpRequest at 'https://example.okta.com/oauth2/v1/authorize?response_type=code&client_id=X&redirect_uri=http%3A%2F%2F127.0.0.1%3A8000%2Foidc%2Fcallback%2F&state=X&scope=openid+email+profile&prompt=none&nonce=X' (redirected from 'http://127.0.0.1:8080/api/X') from origin 'http://127.0.0.1:8080' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
我试图找出失败的原因。
在本地开发中，我在127.0.0.1:8000上运行我的API，而在127.0.0.1:8080上运行我的SPA，因此显然来源不匹配。我已经使用代理设置了Vue，因此看起来请求来自8080，但是到Okta的请求中的redirect_uri仍然使用8000。
当我部署到测试服务器时，我将docker容器用于API和SPA，并使用反向代理来路由请求以及SSL。在这种情况下，API和SPA具有相同的来源（我认为）。但是我仍然收到相同的错误消息。
Access to XMLHttpRequest at 'https://example.okta.com/oauth2/v1/authorize?response_type=code&client_id=X&redirect_uri=http%3A%2F%2Fexample.com%2Foidc%2Fcallback%2F&state=X&scope=openid+email+profile&prompt=none&nonce=X' (redirected from 'https://example.com/api/X') from origin 'https://example.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
如果您注意到，redirect_uri是http，而不是https。我怀疑这就是失败的原因。尽管我不确定，因为如果我将浏览器导航到API，我使用的是https，但是redirect_uri仍然是http，并且仍然可以成功进行身份验证。
任何见解都会非常有帮助。
编辑：我已经尝试在Okta配置的“安全性”>“ API”>“可信来源”部分中添加来源。没有骰子。
解决方法
https://developer.okta.com/docs/guides/enable-cors/overview/
在Okta中，CORS允许您网站上托管的JavaScript使用XMLHttpRequest向Okta会话cookie的Okta API发出请求。必须明确允许每个网站的原始来源为“受信任的来源”。
因此，请在Okta客户端配置中正确配置您的Trusted Origins。
,您要拨打AJAX呼叫/ authorize吗？这可能是错误的原因。
如here所述，当向/ authorize端点发出请求时，浏览器（用户代理）应重定向到该端点。您不能在此端点上使用AJAX。