springboot解決vue對接前端OPTIONS的問題

之前需要出一個頁面,前端已經寫好了,比較擅長使用vue框架,做好之後給我,死活出不來效果,請求不到數據,F12出來報錯,一堆查詢百度,最後發現vue有個OPTIONS前置請求,類似於嗅探,提前偵查接口是否存在這樣的機制。
起初我是認爲有springboot有默認的攔截機制,因爲還涉及到了跨域的問題,
現在兩個問題

  • 跨域的問題
  • vue的options的前置請求攔截問題
    跨域的問題之前直接加上一句即可以了
public ResponseEntity<JSONObject> supplySiteGet(HttpServletRequest request, HttpServletResponse response) {
    response.setHeader("Access-Control-Allow-Origin", "*");
    、、、、、、、、、
}

當然 * 也可以換成其他特定的127.0.0.1 或者localhost這種,其他都可以,視情況而定
針對於vue的OPTIONS的問題,嘗試了許多

 if (request.getMethod().equals("OPTIONS")) {
            response.setStatus(200);
        }

直接設置 狀態碼==200 ,發現不可行,問題依然存在,請求不到結果,

 if (request.getMethod().equals("OPTIONS")) {
           return new ResponseEntity<String>("SUCCESS", HttpStatus.OK);
        }

檢測到請求方法是OPTIONS的時候直接返回,但其實options與post視爲一個請求,這樣做不可以解決問題

        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("Access-Control-Allow-Methods", "GET, HEAD, POST, PUT, PATCH, DELETE, OPTIONS");
        response.setHeader("Access-Control-Max-Age", "86400");
        response.setHeader("Access-Control-Allow-Headers", "*");

設置請求頭Access-Control-Allow-Methods 將已有的添加包括options,依然解決不了問題,
懷疑是springboot是不是需要特殊配置,
添加配置類

@Configuration
public class GlobalCorsConfig {


    @Bean
    public WebMvcConfigurer corsConfigurer(){
        // 重寫父類提供的跨域請求處理的接口
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                // 添加映射路徑
                registry.addMapping("/**")
                        // 放行哪些原始域
                        .allowedOrigins("*")
                        // 放行哪些請求方式
                        .allowedMethods("*")
                        // 是否允許攜帶 cookie
                        .allowCredentials(true)
                        // 放行哪些頭部信息
                        .allowedHeaders("*");
            }
        };
    }
}

增加了一個@Configuration 將allowedMethods增加OPTIONS,allowedOrigins,添加你的請求主機,或者沒有特殊要求直接 * 也可以,視情況而定。最後這樣之後請求成功。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章