vue前后端分离注意事项

如何post发送表单数据

前端VUE注意

1.VUE的数据处理

loginBynameAndPW为封装方法

    login() {
      const that = this
      const params =  {
        'username' :that.username ,
    'password':that.password
      }
      // Make a POST request to login endpoint
      loginBynameAndPW( params)
        .then(({response}) => {
          // Handle successful login response

          if (response.flag){
            console.log("success");
            router.push("/")
          }
        })
        .catch(error => {
          // Handle failed login response
          console.log(error);
        });
    }

如果项目引入了Spring security ，因为Security需要表单发送 ，而axios 默认发送格式为Json，对此需要进行一个转换，可以使用qs插件对数据进行转换。

eg：

export const loginBynameAndPW = (params :any) =>

  request.post('/login',qs.stringify(params) )

2.Axious封装 如何设置端口，请求网址

如果使用了.env

在.env中配置VUE_APP_BASE_URL 可以写完整的地址 如Http://127.0.0.1/api

因为封装的axious是原生axious，,默认使用的是.env配置的basrURL， 最好还是不要配置baseURL，
建议在axios请求页面中拼接请求地址

后端注意事项

配置一个MvcConfig

@Configuration
public class WebMvcconfig  implements WebMvcConfigurer {



    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowCredentials(true)
                .allowedHeaders("*")
                .allowedOriginPatterns("*")
                .allowedMethods("*");
    }

}

在Security配置页中

// 关闭跨站请求防护
http.csrf().disable()