前后端交互跨域問題的解決方案

摘要

---

跨域問題 在前后端交互的時候，會經常出現，對於這種問題，前端和后端都有自己的解決方式；

問題復現

---

上面出現的問題：前端項目在端口號為8080上部署的，后端項目是在端口號為8181上部署的，如果沒有相應的跨域請求的處理，就會出現CORS跨域的問題。

解決方案

---

• 后端解決：

解決方法：

在服務端只需要編寫一個類，這個類來實現一個接口，重寫接口的方法，就可以解決跨域問題。

1. 創建一個CrosConfig類 ，隨便一個什么類都可以，沒有名字要求。

2. 讓CrosConfig類實現WebMvcConfigurer接口。

3. 重寫 WebMvcConfigurer 接口中 addCorsMapping(CorsRegistry registry) 方法。
   

   @Configuration
   public class CrosConfig implements WebMvcConfigurer {
       @Override
       public void addCorsMappings(CorsRegistry registry) {
           registry.addMapping("/**")
                   .allowedOrigins("*")
                   .allowedMethods("GET","HEAD","POST","DELETE","OPTIONS")
                   .allowCredentials(true)
                   .maxAge(3600)
                   .allowedHeaders("*");
       }
   }
   // 對於方法中一些參數的設置，這里不做解釋，自己可以稍微百度一下。
   

解決結果：

總結

對於跨域問題還有好多解決的方式，對於跨域問題怎么出現的？一些原理性的沒有介紹，這個網上都有介紹，大家可以去百度一下。因為我是做后端開發的，在開發過程中遇到了這個問題，所以就提供后端 的解決方式。