Я хочу использовать axios для взаимодействия с бэкэндом.Вот мой код внешнего интерфейса:
AXIOS.post('/api/login',qs.stringify({
'username': this.form.username,
'password': this.form.password
})).then((response) => {
var status = response.data;
if(status === 'successful') {
this.$router.push('/information');
} else {
alert(response.data.message);
}
console.log(response);
}).catch((error) => {
console.log(response);
});
Я настроил оси так:
import axios from 'axios'
export const AXIOS = axios.create({
baseURL: 'http://loacalhost:8088',
headers: {
'Access-Control-Allow-Origin': 'http://localhost:8080'
}
})
И я использую Spring Boot в бэкэнде.Чтобы решить проблему с CORS, мне нужно выполнить некоторые настройки:
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
import static org.springframework.web.cors.CorsConfiguration.ALL;
@Configuration
public class CORSConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins(ALL)
.allowedMethods(ALL)
.allowedHeaders(ALL)
.allowCredentials(true);
}
}
И это мой контроллер:
@RestController
@RequestMapping("/api")
public class LoginController {
@RequestMapping(path = "/login", method = RequestMethod.POST)
public @ResponseBody String login(@RequestParam String username,
@RequestParam String password){
if(username.equals("123") && password.equals("123")){
return "successful";
} else {
return "failed";
}
}
}
Когда веб-интерфейс попытался отправить запрос, Chrome обнаружил две ошибки:
Что я должен сделать, чтобы решить эту странную проблему?Может ли кто-нибудь помочь?