前后端分离的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

扫描二维码关注公众号，回复： 10686009 查看本文章

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));
	}