前後端分離的Http請求和Cors問題

前後端分離，

前端和後端在不同的服務器上，必然跨域

錯誤

Access to XMLHttpRequest at 'http://127.0.0.1:8888/api/menus' from origin 'http://localhost:8081' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

解決方案

Vue前端

main.js

//配置請求的根路徑
const instance =axios.create({
  baseURL: 'http://127.0.0.1:8888/',
  timeout: 5000,
  changeOrigin: true, // 這個參數代表發送跨域請求
  headers: {
    "Access-Control-Allow-Origin":"*",
    "Access-Control-Allow-Headers":"Content-Type,Content-Length, Authorization, Accept,X-Requested-With"
  }
})
instance.interceptors.request.use(config=> {
  //config.headers("Access-Control-Allow-Origin", " * ");
  //config.headers.Authorization = window.sessionStorage.getItem('token')
  //在最後必須 return config
  return config
})

Java後端

該類與啓動類同級

package com.ehrm;

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;


@Configuration
public class CorsConfig {
    private CorsConfiguration buildConfig() {
        CorsConfiguration corsConfiguration = new CorsConfiguration();
        corsConfiguration.addAllowedOrigin("*"); // 1允許任何域名使用
        corsConfiguration.addAllowedHeader("*"); // 2允許任何頭
        corsConfiguration.addAllowedMethod("*"); // 3允許任何方法（post、get等）
        return corsConfiguration;
    }

    @Bean
    public CorsFilter corsFilter() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", buildConfig()); // 4
        return new CorsFilter(source);
    }
}

後端無法接受axios傳遞過來的參數

需要使用qs

qs.parse()——將URL解析成對象的形式

qs.stringify()——將對象 序列化成URL的形式，以&進行拼接

main.js文件

//序列化傳遞的參數
import qs from 'qs'

//配全局屬性配置，在任意組件內可以使用this.$qs獲取qs對象
Vue.prototype.$qs = qs

login() {
        this.$refs.loginFormRef.validate(async valid=>{
          //先驗證
          if(!valid) return;
          //返回值是 promise用 await 和async 異步
          //解構
          let params= { username:this.username,
            password:this.password}
          console.log(this.loginForm.username)
          const res =await this.$http.post("/hr/doFindHrByUsername",this.$qs.stringify(params)
           );
         // if(res.meta.status !==200) return this.$message.error('登錄失敗，用戶名或密碼錯誤')
          this.$message.success('登錄成功'+res)
          // 1. 將登錄成功之後的 token，保存到客戶端的 sessionStorage 中
          //   1.1 項目中除了登錄之外的其他API接口，必須在登錄之後才能訪問
          //   1.2 token 只應在當前網站打開期間生效，所以將 token 保存在 sessionStorage 中
          console.log(res)
          //window.sessionStorage.setItem("token",res.data.token);
          //2.通過編程式導航跳到後臺主頁,路由地址是 /home
          this.$router.push("/home")
        });
      }

後端

@RequestMapping(path = "doFindHrByUsername",method = RequestMethod.POST,produces = "application/json; charset=UTF-8")
	public JsonResult doFindHrByUsername(String username,String password)  {

		return new JsonResult("登錄成功",hrService.findHrByUsername(username,password));
	}