Spring 授權伺服器 1.0.0：請求 /oauth2/token 時出現 javascript 錯誤
P粉314915922
2023-09-04 15:24:41
<p>我已經創建了一個 Spring 授權伺服器 - 你可以在 github 上找到程式碼 https://github.com/costerutilo/UTILO-Authorization-Server</p>
<p>我無法透過 JavaScript 讀取令牌。我創建了一個簡單的 Vue Web 應用程式來獲取客戶端授權程式碼，但我無法取得令牌。 </p>
<p>嘗試使用 fetch API：</p>
<pre class="brush:php;toolbar:false;">const url = 'http://127.0.0.1:9000/oauth2/token';
var credentials = btoa(import.meta.env.VITE_CLIENT_ID ':' 'secret');
var basicAuth = 'Basic ' credentials;
var myHeaders = new Headers();
//myHeaders.append("Authorization", "Basic dXRpbG8tY2xpZW50OnNlY3JldA==");
myHeaders.append("Authorization", basicAuth);
myHeaders.append("Content-Type", "application/x-www-form-urlencoded");
var urlencoded = new URLSearchParams();
urlencoded.append("grant_type", "authorization_code");
// urlencoded.append("code", "yyJTTI3JqNno1XlSW59qxX3CCytMm-ChoHnqVw3iSUGyT6ltT_tpPclQ8bdSyeApO4IIWE442irBiRwJJ3425 月Tqavqsy");
urlencoded.append("code", code);
urlencoded.append("redirect_uri", "https://www.utilo.eu");
var requestOptions = {
method: 'POST',
headers: myHeaders,
body: urlencoded,
redirect: 'follow'
};
fetch(url, requestOptions)
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.log('error', error));</pre>
<p>在瀏覽器的 javascript 控制台中，我看到 CORS 異常</p>
<pre class="brush:php;toolbar:false;">Access to fetch at 'http://127.0.0.1:9000/oauth2/token' from origin 'http://127.0.0.1:9010' has been blocked by CORS policy: Response to preflight request doesn't pass access control check</pre>
<p>伺服器控制台給出錯誤：</p>
<pre class="brush:php;toolbar:false;">2023-02-27T09:35:53.786 01:00 TRACE 33212 --- [nio-9000-exec-3] o.s.s.Transw.a。 =anonymousUser, Credentials=[PROTECTED], Authenticated=true, Details=WebAuthenticationDetails [RemoteIpAddress=127.0.0.1, SessionId=null], Granted Authorities=[ROLE_ANONYMOUSUS]] to authce entryess is accryessed resceed
org.springframework.security.access.AccessDeniedException: Access Denied</pre>
<p>如果我在 Postman 中嘗試相同的請求，我會得到帶有令牌的 JSON。 </p>
<p>我不知道我的推理錯誤是什麼，或者我做錯了什麼。 </p>
您將需要為您的 Spring Security 過濾器鏈啟用 CORS 並提供
@Bean例如 此範例： p>@Configuration public class CorsConfig { @Bean public CorsConfigurationSource corsConfigurationSource() { UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); CorsConfiguration config = new CorsConfiguration(); config.addAllowedHeader("*"); config.addAllowedMethod("*"); config.addAllowedOrigin("http://127.0.0.1:4200"); config.setAllowCredentials(true); source.registerCorsConfiguration("/**", config); return source; } }注意：連接埠
4200用於 Angular 開發環境，替換為您的 Vue 開發伺服器連接埠。