神坑啊,好坑
1.vue-cli@3配置代理的文件名vue.config.js 放到根目录 !放到根目录 !放到根目录 !
2.后端springsecurity放行所有请求,不然你根本访问不到,一直要你登陆,并且开启跨域(http.cors())
3.springboot配置跨域(如果没有用到springsecurity,则需要配置,用到了,直接只配置springsecurity的http.cors()即可)
4.理解代理配置替换前后规律,逻辑,少一个/多一个/都是404
1.vue.config.js
module.exports = {
// cli3 代理是从指定的target后面开始匹配的,不是任意位置;配置pathRewrite可以做替换
> 理解下,上面这句话,假如你api的代理之前原始请求地址为:http://localhost:8080/api/find,首先检测当前请求地址是否存在/api,
> 存在则替换,用正则表达式^/api替换http://localhost:8080/api/find变为http://localhost:8080/find,再把前端的地址替换成
> http://localhost:80最终代理为http://localhost:80/find
devServer: {
proxy: {
'/api': {
target: 'http://localhost:80',
changeOrigin: true,
pathRewrite: {
'^/api':""
}
}
}
}
}
2.springsecurity放行所有请求
测试环境,你不放行,是防范谁.接口对接完成后在配置拦截地址即可
package com.example.carmi_system.security.config;
import com.example.carmi_system.security.CustomUserDetailsService;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Bean;
import org.springframework.security.config.annotation.authentication.builders.AuthenticationManagerBuilder;
import org.springframework.security.config.annotation.method.configuration.EnableGlobalMethodSecurity;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;
import org.springframework.security.crypto.bcrypt.BCryptPasswordEncoder;
import org.springframework.security.crypto.password.PasswordEncoder;
/**
* @ClassName WebSecurityConfig
* @Description TODO
* @Author ZhangYong
* @Date 2021/2/3 19:30
* @Version 1.0
**/
@EnableWebSecurity
@EnableGlobalMethodSecurity(prePostEnabled = true) // 开启方法级安全验证
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
@Autowired
private CustomUserDetailsService customUserDetailsService;
/**
* 指定加密方式
*/
@Bean
public PasswordEncoder passwordEncoder(){
// 使用BCrypt加密密码
return new BCryptPasswordEncoder();
}
@Override
protected void configure(AuthenticationManagerBuilder auth) throws Exception {
auth
// 从数据库读取的用户进行身份认证
.userDetailsService(customUserDetailsService)
.passwordEncoder(passwordEncoder());
}
@Override
protected void configure(HttpSecurity http) throws Exception {
http.cors().and().csrf().disable().
authorizeRequests().
antMatchers( "/**","/login.html","/file/**","/js/**", "/css/**", "/font/**", "/images/**").permitAll().//不拦截
//antMatchers("/userCenter.html","/userInfo/**").hasAnyRole("vip","admin","normal").
//antMatchers("/adminCenter.html","/admin/**").hasRole("admin").
//anyRequest().hasRole("admin").//其余全部需要admin权限
and().formLogin().loginPage("/login.html").//自定义登陆页面
loginProcessingUrl("/authentication/form");
}
}
3.springboot配置跨域
百度
4.理解代理配置替换前后规律
后端地址:‘http://localhost:80’
后端接口路径:’/admin/insert’
前端地址:‘http://localhost:8080’
被代理路径:’/api’
此时前端代理该如何配置呢?
module.exports = {
devServer: {
proxy: {
被代理路径: {
target:后端接地址,
changeOrigin: true,
pathRewrite: {
'^被代理路径':''
}
}
}
}
}
let url = 被代理路径+后端接口路径
axios.get(url).then(d=>{
window.console.log(d)
})
再见!