前后端分离的Http请求和Cors问题

亦凉 2023-06-27 03:16 2阅读 0赞

前后端分离，

前端和后端在不同的服务器上，必然跨域

错误

Access to XMLHttpRequest at '[http://127.0.0.1:8888/api/menus][http_127.0.0.1_8888_api_menus]' from origin '[http://localhost:8081][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));
    	}

[http_127.0.0.1_8888_api_menus]: http://127.0.0.1:8888/api/private/v1/menus
[http_localhost_8081]: http://localhost:8081