我有一个web应用程序,它由两部分组成
包com.example.googleoauth;
package com.example.googleoauth;
import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;
@SpringBootApplication
public class GoogleoauthApplication {
public static void main(String[] args) {
SpringApplication.run(GoogleoauthApplication.class, args);
}
}
package com.example.googleoauth.Controllers;
package com.example.googleoauth.Controllers;
import org.springframework.security.core.annotation.AuthenticationPrincipal;
import org.springframework.security.oauth2.core.user.OAuth2User;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.security.Principal;
import java.util.Map;
@RestController
@RequestMapping("/")
public class MainController {
@GetMapping("/test")
public String test() {
return "Success test from Spring Boot";
}
@GetMapping("/login")
public Map<String, Object> login(@AuthenticationPrincipal OAuth2User principal) throws IOException {
return principal.getAttributes();
}
}
包com.example.googleoauth.Configuration;
package com.example.googleoauth.Configuration;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.http.HttpStatus;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.security.web.authentication.HttpStatusEntryPoint;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.CorsConfigurationSource;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import java.util.Arrays;
@Configuration
public class WebConfiguration extends WebSecurityConfigurerAdapter {
@Override
protected void configure(HttpSecurity http) throws Exception {
http
.cors().configurationSource(corsConfigurationSource())
.and()
.authorizeRequests(a -> a
.antMatchers("/", "/error", "/webjars/**", "/test").permitAll()
.anyRequest().authenticated()
)
.exceptionHandling(e -> e
.authenticationEntryPoint(new HttpStatusEntryPoint(HttpStatus.UNAUTHORIZED))
)
.oauth2Login().defaultSuccessUrl("/login");
}
@Bean
CorsConfigurationSource corsConfigurationSource() {
CorsConfiguration configuration = new CorsConfiguration();
configuration.setAllowedOrigins(Arrays.asList("http://localhost:8080"));
configuration.setAllowedMethods(Arrays.asList("HEAD", "GET", "PUT", "POST", "DELETE", "PATCH", "OPTIONS"));
configuration.setAllowCredentials(true);
//the below three lines will add the relevant CORS response headers
configuration.addAllowedOrigin("http://localhost:8080");
configuration.addAllowedHeader("*");
configuration.addAllowedMethod("*");
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
source.registerCorsConfiguration("/**", configuration);
return source;
}
}
> < li>
我的Vue应用
actions: {
SIGNIN({commit}) {
axios.get('http://localhost:8081/oauth2/authorization/google')
.then((profile) => {
commit('SET_AUTH_API', profile.data)
return profile;
})
.catch((error) => {
console.log(error)
return error;
})
},
我可以访问http://localhost:8081/oauth 2/authorization/google,并使用Google成功进行身份验证,获取用户数据
但是我从端口8080通过Vue应用程序访问此链接时遇到问题,我在下面收到错误
在“中”访问XMLHttpRequesthttps://accounts.google.com/o/oauth2/v2/auth?response_type=code
在我向axios GET请求添加了标题:{}之后,这篇文章的回答对我有所帮助
在Chrome CORS扩展的帮助下,我摆脱了“已被CORS策略阻止”的消息,但当我发送时似乎什么都没有发生http://localhost:8081/oauth2/authorization/google“请求
actions: {
SIGNIN({commit}) {
console.log("store-SIGNIN")
const options = {
method: 'GET',
url: 'http://localhost:8081/oauth2/authorization/google',
headers: {}
};
axios(options)
.then((profile) => {
// console.log(resp)
console.log(1)
commit('SET_AUTH_API', profile.data)
console.log(2)
return profile;
})
.catch((error) => {
console.log(error)
return error;
})
}
在我得到的开发控制台输出中
请给我指出正确的方向
回复我的帖子:
我应该把整件事反过来做。
我在这个回购中找到了答案https://github.com/bmstefanski/spring-vue-rest-oauth2我需要一个完整的解决方案
解决方案看起来像
就是这样,没有CORS或选项错误(尽管我们需要后端的CORS配置)