【发布时间】：2020-11-06 15:33:54
【问题描述】：
在我的问题中，后端有 Spring Boot 应用程序（使用 Spotify API），前端有 Vue 应用程序。我在 localhost:8080 上使用服务器，在 localhost:8081 上使用前端。我想通过 axios 将我的前端连接到我的后端，我尝试了一切，但仍然出现 CORS 错误。
当我调用测试 GET 端点 /getList() 时，我得到了
Access to XMLHttpRequest at 'http://localhost:8080/getList' from origin 'http://localhost:8081' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
当我尝试调用 POST /findTracks() 时，我得到了：
Access to XMLHttpRequest at 'http://localhost:8080/findTracks' from origin 'http://localhost:8081' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.
而且我已经尝试了所有方法（如您在下面的代码中所见）。
第一：
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.EnableWebMvc;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration
@EnableWebMvc
public class CorsConfiguration implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry){
registry.addMapping("/**").allowedHeaders("*").allowedMethods("*");
} //even with .allowedOrgins("http://localhost:8081");
}
然后在Controller类中：
@CrossOrigin(origins = "*", allowedHeaders = "*")
@RestController
public class SpotifyApiController {
@CrossOrigin(origins = "*", allowedHeaders = "*")
@RequestMapping(value = "/getList", method = RequestMethod.GET)
public List<String> getList() {
ArrayList<String> a = new ArrayList<>();
a.add("dwa");
a.add("trzy");
return a;
}
@RequestMapping(value = "/findTracks",
method = RequestMethod.POST,
consumes = "application/json",
produces = "application/json")
public List<Track> getTracksForTitles(@RequestBody TrackWrapper userTracks, TrackService tracksService, OAuth2Authentication details) {
return tracksService.generateTracksDetails(getActiveToken(details), userTracks);
}
然后在 Vue 中：
import axios from 'axios';
const SERVER_URL = 'http://localhost:8080'
const instance = axios.create({
baseURL: SERVER_URL,
timeout: 1000
});
export default{
findTracksInSpotify:(jsonObject)=>instance.post('/findTracks',{
userTracks: jsonObject.userTracks,
headers:{
'Content-Type': 'application/json',
}
}).then(() => function(data){
return JSON.parse(data)
}),
getList:()=>instance.get('/getList',{
transformResponse:[function(data){
return JSON.parse(data)
}]
}),
}
如果需要，还有我的 Spring Security 课程：
import org.springframework.boot.autoconfigure.security.oauth2.client.EnableOAuth2Sso;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.web.context.request.RequestContextListener;
@Configuration
@EnableOAuth2Sso
@EnableWebSecurity
public class OAuth2Configuration extends WebSecurityConfigurerAdapter {
@Override
protected void configure(HttpSecurity http) throws Exception {
http
.csrf().disable()
.antMatcher("/**")
.authorizeRequests()
.antMatchers("/", "/login**")
.permitAll()
.anyRequest()
.authenticated()
.and().logout().logoutSuccessUrl("/").permitAll();
}
@Bean
public RequestContextListener requestContextListener() {
return new RequestContextListener();
}
}
我什至安装了 chrome 扩展，但它也不起作用。
你能告诉我我做错了什么吗？
【问题讨论】：
标签： spring vue.js axios cors allowed-origin