今天在写代码配置axios的时候,出现了一个bug
Access to XMLHttpRequest at 'http://localhost:9090/videolist' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. xhr.js:245 GET http://localhost:9090/videolist net::ERR_FAILED 403 (Forbidden) dispatchXhrRequest @ xhr.js:245 xhr @ xhr.js:57 dispatchRequest @ dispatchRequest.js:53 _request @ Axios.js:155 request @ Axios.js:50 Axios.<computed> @ Axios.js:177 wrap @ bind.js:9 getVideoList @ index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/video/videoMainContainer.vue?vue&type=script&lang=js:12 created @ index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/index.js??ruleSet[0].use[0]!./src/views/video/videoMainContainer.vue?vue&type=script&lang=js:18 callWithErrorHandling @ runtime-core.esm-bundler.js:326 callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:334 callHook @ runtime-core.esm-bundler.js:3385 applyOptions @ runtime-core.esm-bundler.js:3310 finishComponentSetup @ runtime-core.esm-bundler.js:6801 setupStatefulComponent @ runtime-core.esm-bundler.js:6728 setupComponent @ runtime-core.esm-bundler.js:6667 mountComponent @ runtime-core.esm-bundler.js:5220 processComponent @ runtime-core.esm-bundler.js:5198 patch @ runtime-core.esm-bundler.js:4873 componentUpdateFn @ runtime-core.esm-bundler.js:5397 run @ reactivity.esm-bundler.js:216 instance.update @ runtime-core.esm-bundler.js:5428 callWithErrorHandling @ runtime-core.esm-bundler.js:326 flushJobs @ runtime-core.esm-bundler.js:516 Promise.then (async) queueFlush @ runtime-core.esm-bundler.js:432 queuePostFlushCb @ runtime-core.esm-bundler.js:449 queueEffectWithSuspense @ runtime-core.esm-bundler.js:1635 scheduler @ runtime-core.esm-bundler.js:1814 resetScheduling @ reactivity.esm-bundler.js:302 triggerEffects @ reactivity.esm-bundler.js:345 triggerRefValue @ reactivity.esm-bundler.js:1020 set value @ reactivity.esm-bundler.js:1061 finalizeNavigation @ vue-router.mjs:3146 eval @ vue-router.mjs:3028 Promise.then (async) pushWithRedirect @ vue-router.mjs:2999 push @ vue-router.mjs:2925 handleMenuItemClick @ menu.mjs:178 handleClick @ menu-item2.mjs:51 onClick._cache.<computed>._cache.<computed> @ menu-item2.mjs:83 callWithErrorHandling @ runtime-core.esm-bundler.js:326 callWithAsyncErrorHandling @ runtime-core.esm-bundler.js:334 invoker @ runtime-dom.esm-bundler.js:841 Show 42 more frames Show less home:1 Uncaught (in promise) AxiosError {message: 'Network Error', name: 'AxiosError', code: 'ERR_NETWORK', config: {…}, request: XMLHttpRequest, …}
意思:
CORS策略已阻止从源“http://localhost:8080”访问位于“http://localhost:9090/video list”的XMLHttpRequest:请求的资源上不存在“Access-Control-Allow-Origin”标头。 xhr.js:245
<template> <div> <el-carousel :interval="4000" type="card" height="200px"> <el-carousel-item v-for="item in 6" :key="item"> <h3 class="medium">{{ item }}</h3> </el-carousel-item> </el-carousel> </div> </template> <script> import axios from "axios"; export default { data(){ return { videoList:[] } }, methods:{ getVideoList(){ axios.get("/videolist").then((res)=>{ console.log(res); }) } }, created(){ this.getVideoList(); } } </script> <style> </style>
这里经过查找,找到出错的bug,自己util的跨域路径是8081
而自己跑的项目是8080
路径设置不一致,因此出错了,修改一样就好了
自己webConfig的配置:
package zero.file.videoProject.util; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; import org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter; @Configuration public class WebConfig implements WebMvcConfigurer { @Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**") .allowedOrigins("http://localhost:8080") .allowedMethods("GET","POST","PUT","OPTIONS","DELETE") .allowCredentials(true) .maxAge(3600); } }
WebConfig要在util下配置