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

Posted 2021-07-05 Yan Yang

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.$\mathrm{[e-mail]}: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");
    }
}

完美解决！