vue-cli@3+axios+springboot+springsecurity跨域代理配置

神坑啊,好坑

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

再见!