溫馨提示×

如何解決springboot整合vue中的跨域問題

小樊
83
2024-06-26 12:17:46
欄目: 編程語言

可以通過在springboot項目中配置跨域請求的過濾器來解決整合vue中的跨域問題。具體步驟如下：

  1. 在springboot項目中創(chuàng)建一個類，繼承自org.springframework.web.servlet.config.annotation.WebMvcConfigurerAdapter，并重寫addCorsMappings方法，如下：
@Configuration
public class CorsConfig extends WebMvcConfigurerAdapter {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowCredentials(true)
                .maxAge(3600);
    }
}
  1. 在vue項目中，可以在axios的請求攔截器中設(shè)置跨域請求的相關(guān)配置，如下：
// main.js
import axios from 'axios'

axios.interceptors.request.use(
  config => {
    config.headers['Content-Type'] = 'application/json'
    config.headers['Access-Control-Allow-Origin'] = '*'
    return config
  },
  error => {
    return Promise.reject(error)
  }
)

通過以上步驟，可以解決springboot整合vue中的跨域問題，使得前后端項目可以正常通信。

0 踩