前後端分離解決跨域問題

在前後端分離的場景下，遇到跨域問題最直觀的原因是，前端與後端分開部署在兩個機器上或者使用了不同的埠號，當前端訪問後端服務時得不到資料或者沒有達到預期的效果。

使用SpringBoot + Vue進行前後端分離開發時，需解決跨域的問題，使前後端能夠獨立執行

CORS是一個W3C標準，全稱是"跨域資源共享"（Cross-origin resource sharing）。
它允許瀏覽器向跨源伺服器，發出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制。

在SpringBoot中配置CorsConfig 類

package com.superb.config;

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

Vue預設使用8080埠
後端在application.yml檔案配置中修改埠號以防衝突

server:
  port: 8081