Trying to fix this CORS error
Access to XMLHttpRequest at 'http://localhost:9000/login' (redirected from 'http://localhost:3001/api/demo/signup') from origin 'http://localhost:3001' 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.
I set the proxy and also webConfig for allowing cors and there's no change. Here are the codes.
nuxt.config.js
modules: [
'bootstrap-vue/nuxt',
'@nuxtjs/axios',
'@nuxtjs/proxy',
'@nuxtjs/style-resources', // scss
'@nuxtjs/bulma'
],
axios: {
proxy: true,
debug: true,
credenitals: true,
retry: { retries: 3 },
},
proxy: {
'/api': {
target: 'http://localhost:9000',
pathRewrite: {'^/api/': ''},
changeOrigin: true // accept cross origin
},
},
server: {
port: 3001,
},
signUp.vue
async save(){
console.log('data chk', this.data)
const params = this.data
await axios.post('/api/demo/signup', {params})
.then((result) => {
console.log('result', result)
}).catch((err) => {
console.error(err)
});
},
Application.java
@EnableJpaAuditing
@EnableAutoConfiguration
@SpringBootApplication
// @SpringBootApplication(exclude = { SecurityAutoConfiguration.class })
public class DemoApplication {
public static void main(String[] args) {
SpringApplication.run(DemoApplication.class, args);
System.out.println("Hello Kuroe!");
}
@Bean
public WebMvcConfigurer corsConfigurer(){
return new WebMvcConfigurer() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowCredentials(true)
.allowedHeaders("*")
.allowedOrigins("http://localhost:3001")
.allowedMethods("GET", "PUT", "POST", "DELETE")
.maxAge(3000);
}
};
}
}
Controller.java
@Slf4j
@RestController
public class DemoController {
private DemoService demoService;
@CrossOrigin(allowedHeaders = "*")
@PostMapping("/api/demo/signup")
public String write(DemoDto demoDto) {
log.debug("signup={}", demoDto);
demoService.savePost(demoDto);
return "done";
}
}
