Access to XMLHttpRequest at ‘http://localhost:xxxx“

- 日理万妓 2022-10-11 15:54 193阅读 0赞

### 1. 报错信息如下 ###

进行跨域请求时报错，报错信息如下：  
  
Download the Vue Devtools extension for a better development experience:  
https://github.com/vuejs/vue-devtools  
vue.js:9064 You are running Vue in development mode.  
Make sure to turn on production mode when deploying for production.  
See more tips at https://vuejs.org/guide/deployment.html  
index.html:1 Access to XMLHttpRequest at ‘http://localhost:8888/employees’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.  
jquery.js:2 GET http://localhost:8888/employees net::ERR\_FAILED  
send @ jquery.js:2  
ajax @ jquery.js:2  
p. @ jquery.js:2  
mounted @ index.html:30  
invokeWithErrorHandling @ vue.js:1863  
callHook @ vue.js:4220  
mountComponent @ vue.js:4087  
Vue. m o u n t @ v u e . j s : 9044 V u e . mount @ vue.js:9044 Vue. mount@vue.js:9044Vue.mount @ vue.js:11944  
Vue.\_init @ vue.js:5012  
Vue @ vue.js:5078  
(anonymous) @ index.html:23

### 2. 报错解决方法 ###

对访问的项目进行如下设置

package com.yy.mp.config;
    
    import org.springframework.context.annotation.Configuration;
    import org.springframework.web.servlet.config.annotation.CorsRegistry;
    import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
    
    @Configuration
    // 跨域访问
    public class Config implements WebMvcConfigurer { 
        @Override
        public void addCorsMappings(CorsRegistry registry) { 
            // 添加映射路径
            registry.addMapping("/**")
                    // 放行哪些原始域
                    // .allwedOrigins("*")  // 2.2 之前的版本用的
                    .allowedOriginPatterns("*")
                    // 是否发送 Cookie 信息
                    .allowCredentials(true)
                    // 放行哪些原始域（请求方式）
                    .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                    // 放行哪些头部信息
                    .allowedHeaders("*")
                    // 暴露哪些头部信息（因为跨域访问默认不能获取全部头部信息）
                    .exposedHeaders("Header1", "Header2");
        }
    }

完美解决！