已经配置了 WebConfig 之后，还是出现跨域

package com.imis.datamanagement.config;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.InterceptorRegistry;
import org.springframework.web.servlet.config.annotation.ResourceHandlerRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {

        //跨域配置：不可设置为*，不安全, 前后端分离项目，可能域名不一致（前端是8080，后端是8888）
        //注意我们用了nginx之后就不需要写端口号了：配置跨域，如果有多个域名就写多个
        registry.addMapping("/**").allowedOrigins("localhost:8080");
    }
}

No 'Access-Control-Allow-Origin' header is present on the requested resource.

或者：Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.

在后端进行处理

1. 编写过滤器类：

/*
 * @Time : 2022/10/26 18:47
 * @Author : hao
 * @File : RequestFilter.java
 * @Software : IntelliJ IDEA
 */
package com.imis.datamanagement.handler;

import javax.servlet.*;
import javax.servlet.annotation.WebFilter;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;


@WebFilter(filterName = "requestFilter",urlPatterns = {"/*"})
public class RequestFilter implements Filter {

    @Override
    public void init(FilterConfig filterConfig) throws ServletException {

    }

    @Override
    public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
        HttpServletResponse response = (HttpServletResponse) servletResponse;
        HttpServletRequest request = (HttpServletRequest)servletRequest;

        String origin = request.getHeader("Origin");
        response.setHeader("Access-Control-Allow-Origin", "*");
        response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
        response.setHeader("Access-Control-Max-Age", "3600");
//        response.setHeader("Access-Control-Allow-Headers", "x-requested-with,Authorization"); //这个不全面！
        response.setHeader("Access-Control-Allow-Headers", "content-type, xfilecategory, xfilename, xfilesize, Authorization"); //这个全面！
        response.setHeader("Access-Control-Allow-Credentials", "true");
        String method = request.getMethod();
        if(method.equalsIgnoreCase("OPTIONS")){
            servletResponse.getOutputStream().write("Success".getBytes("utf-8"));
        }else{
            filterChain.doFilter(servletRequest, servletResponse);
        }
    }

    @Override
    public void destroy() {

    }

}

2.在项目启动类上加注解：

import org.springframework.boot.web.servlet.ServletComponentScan;

@ServletComponentScan

如果还不行，在前端进行处理：

方式一：没有统一接口的写法

axios.post(
  "url",
  {
    data,
  },
  {
    headers: { "Content-Type": "application/json;charset=UTF-8" }, //加上这个，application/json;charset=UTF-8为json格式，application/x-www-form-urlencoded为form表单格式
  }
);

方式二：统一接口的写法

在 request 的 index.js 文件中：

const service = axios.create({
  // baseURL: "/static/json",
  baseURL: "localhost:8888",
  headers: { "Content-Type": "application/json;charset=UTF-8" },
  transformRequest: [
    //这个好像是可有可无的！
    function (data) {
      // Do whatever you want to transform the data
      let ret = "";
      for (let it in data) {
        ret +=
          encodeURIComponent(it) + "=" + encodeURIComponent(data[it]) + "&";
      }
      return ret;
    },
  ],
});

//或者也可以在这里设置
service.interceptors.request.use(
  (config) => {
    config.headers["Content-Type"] = "application/json;charset=utf-8"; //这里
    if (store.state.token) {
      config.headers["Authorization"] = getToken();
    }
    return config;
  },
  (error) => {
    Promise.reject(error);
  }
);