解决跨域问题

前端解决

通过vue内置代理

server: {
  port: 80,
  host: true,
  open: true,
  // 反向代理，当请求是以dev-api打头的，将会发代理请求，解决跨域问题
  proxy: {
    // https://cn.vitejs.dev/config/#server-proxy
    '/dev-api': {
      target: 'http://127.0.0.1:8080', # 后端地址
      changeOrigin: true, # 开启跨域
      rewrite: (p) => p.replace(/^/dev-api/, '')
    }
  },
},

java后端解决

在 Spring Boot 中，可以通过使用 CorsFilter 过滤器、使用 @CrossOrigin 注解或配置跨域过滤器来解决跨域问题。下面我将为你介绍这三种方法。

1. 使用 CorsFilter 过滤器解决跨域问题

创建一个名为 CorsFilter 的过滤器类，实现 javax.servlet.Filter 接口，并在 doFilter 方法中添加以下代码：

import javax.servlet.*;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
​
public class CorsFilter implements Filter {
    @Override
    public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
        HttpServletResponse httpResponse = (HttpServletResponse) response;
​
        // 设置允许的请求来源，可以设置为具体的域名或 "*" 表示允许所有来源
        httpResponse.setHeader("Access-Control-Allow-Origin", "*");
        // 设置允许的请求方法
        httpResponse.setHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
        // 设置允许的请求头字段
        httpResponse.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, Authorization");
​
        chain.doFilter(request, response);
    }
​
    // 省略其他方法
}

然后，在你的 Spring Boot 应用的配置类中注册该过滤器：

import org.springframework.boot.web.servlet.FilterRegistrationBean;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
​
@Configuration
public class AppConfig {
    @Bean
    public FilterRegistrationBean<CorsFilter> corsFilterRegistrationBean() {
        FilterRegistrationBean<CorsFilter> registrationBean = new FilterRegistrationBean<>();
        registrationBean.setFilter(new CorsFilter());
        registrationBean.addUrlPatterns("/*");
        return registrationBean;
    }
}

这样，所有的请求都会经过 CorsFilter 过滤器，在其中添加了跨域相关的响应头，从而解决跨域问题。

2. 使用 @CrossOrigin 注解解决跨域问题

如果只想部分Controller能跨域，在你的控制器类或接口方法上添加 @CrossOrigin 注解，该注解可以用于指定允许的请求来源、方法和头字段等。例如：

import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
​
@RestController
public class MyController {
    @CrossOrigin(origins = "*", methods = {RequestMethod.GET, RequestMethod.POST})
    @GetMapping("/api/data")
    public String getData() {
        // 处理请求并返回数据
        return "Data";
    }
}

以上代码中，@CrossOrigin 注解指定了允许所有来源（origins = "*") 和 GET、POST 方法（methods = {RequestMethod.GET, RequestMethod.POST}) 的请求访问 /api/data 接口。

3. 配置跨域过滤器

在 Spring Boot 中，你也可以通过配置 WebMvcConfigurer 来实现跨域处理。在你的配置类中添加以下方法：

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 AppConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")
                .allowedHeaders("Origin", "X-Requested-With", "Content-Type", "Accept", "Authorization");
    }
}

以上代码中，addCorsMappings 方法配置了允许所有来源（allowedOrigins("*"))、允许的请求方法（allowedMethods("GET", "POST", "PUT", "DELETE", "OPTIONS")）和允许的请求头字段（allowedHeaders("Origin", "X-Requested-With", "Content-Type", "Accept", "Authorization")）。

以上三种方法都可以用来解决 Spring Boot 的跨域问题，你可以根据自己的项目需求选择适合的方式来处理跨域请求。

通过Nginx服务器

location / {
   add_header Access-Control-Allow-Origin *;
   add_header Access-Control-Allow-Headers X-Requested-With;
   add_header Access-Control-Allow-Methods GET,POST,PUT,DELETE,OPTIONS;

   if ($request_method = 'OPTIONS') {
     return 204;
   }
}