SpringBoot和Vue前后端请求跨域问题

SpringBoot和Vue前后端分离项目如何解决请求跨域问题

• 问题场景
• 解决办法

问题场景

刚开始来练手前后端分离的项目，后端boot项目地址端口为9090，前端地址端口为8080，所以如果不做任何处理去请求后端的方法的时候，前端页面F12就会报下面的内容
前端问题：
Access to XMLHttpRequest at ‘http://localhost:9090/api/city/getCitys’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

解决办法

1、前端添加配置信息

2、后端添加配置类

Vue:
1、 找到jest.config.js
2、 在合适的地方添加下面代码
以下是ES6的写法

devServer: {
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:9090',//这里为后端项目的地址
        ws: true,
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },

3、 后端添加配置类，@ Configuration注解的类会再项目启动的时候自动加载

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 WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "HEAD", "POST", "PUT", "DELETE", "OPTIONS")
                .allowCredentials(true)
                .maxAge(3600)
                .allowedHeaders("*");
    }
}

3、注意事项

因为改了配置文件，记得重启前后端项目