VUE|VUE 跨域代理 VUE|vue跨域

后台直接设置允许跨域，简单粗暴，但是不安全，且很多后台没源码，你改不了
SpringBoot的跨域允许配置

package com.java.core.web.config; import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; //跨域配置 @Configuration public class CorsConfig implements WebMvcConfigurer {@Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping("/**")// 允许跨域访问的路径 .allowedOrigins("*")// 允许跨域访问的源 .allowedMethods("POST", "GET", "PUT", "OPTIONS", "DELETE")// 允许请求方法 .maxAge(168000)// 预检间隔时间 .allowedHeaders("*")// 允许头部设置 .allowCredentials(true); // 是否发送cookie } }

VUE配置代理
【VUE|VUE 跨域代理】

文章图片

proxyTable: { '/api': { // '/api':匹配项 target: 'http://127.0.0.1:8080', // 接口的域名 // secure: false,// 如果是https接口，需要配置这个参数 changeOrigin: true, // 如果接口跨域，需要进行这个参数配置 pathRewrite: { // 如果接口本身没有/api需要通过pathRewrite来重写了地址 '^/api': '/' } } },

下面是axios的

// 创建axios实例 const request = axios.create({ // axios中请求配置有baseURL选项，表示请求URL公共部分 baseURL: "/api", // 超时 timeout: 10000 }); return request({ url: '/login', method: 'post', data: { username, password } })

分割线-------------------------------------------------------------------------
上面算研究时候的东西。。。。。。。。最后发现只能本地用，发布包还得搞ngix代理，放弃了。还是后台接口允许跨域配置把，下面是springbootSecurity的跨域配置

package com.java.core.web.config; import com.java.core.core.security.*; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.context.annotation.Bean; import org.springframework.context.annotation.Configuration; import org.springframework.http.HttpMethod; import org.springframework.security.authentication.AuthenticationManager; 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.core.userdetails.UserDetailsService; import org.springframework.security.web.authentication.UsernamePasswordAuthenticationFilter; import org.springframework.web.cors.CorsConfiguration; import org.springframework.web.cors.CorsConfigurationSource; import org.springframework.web.cors.UrlBasedCorsConfigurationSource; //登录配置@Configuration @EnableWebSecurity @EnableGlobalMethodSecurity(prePostEnabled = true) public class WebSecurityConfig extends WebSecurityConfigurerAdapter {@Autowired private UserDetailsService userDetailsService; @Override public void configure(AuthenticationManagerBuilder auth) throws Exception { // 使用自定义登录身份认证组件 auth.authenticationProvider(new JwtAuthenticationProvider(userDetailsService)); }//配置跨域 private CorsConfigurationSource CorsConfigurationSource() { CorsConfigurationSource source = new UrlBasedCorsConfigurationSource(); CorsConfiguration corsConfiguration = new CorsConfiguration(); corsConfiguration.addAllowedOrigin("*"); //同源配置，*表示任何请求都视为同源，若需指定ip和端口可以改为如“localhost：8080”，多个以“，”分隔； corsConfiguration.addAllowedHeader("*"); //header，允许哪些header，本案中使用的是token，此处可将*替换为token； corsConfiguration.addAllowedMethod("*"); //允许的请求方法，PSOT、GET等 ((UrlBasedCorsConfigurationSource) source).registerCorsConfiguration("/**", corsConfiguration); //配置允许跨域访问的url return source; }@Override protected void configure(HttpSecurity http) throws Exception { // 禁用 csrf, 由于使用的是JWT，我们这里不需要csrf http.cors().configurationSource(CorsConfigurationSource()).and().csrf().disable() .authorizeRequests() // 跨域预检请求 .antMatchers(HttpMethod.OPTIONS, "/**").permitAll() // 登录URL .antMatchers("/login").permitAll() .antMatchers("/**/*.css", "/**/*.js", "/imgs/**").permitAll() //放行静态资源 //其他放行资源 .antMatchers("/favicon.ico").permitAll() // Knife4j .antMatchers("/swagger**/**").permitAll() .antMatchers("/webjars/**").permitAll() .antMatchers("/v2/api-docs-ext/**").permitAll() .antMatchers("/v2/**").permitAll() .antMatchers("/doc.html").permitAll() // 其他所有请求需要身份认证 .anyRequest().authenticated(); // 1、登录、生成Token http.addFilterBefore(new JwtLoginFilter(authenticationManager()), UsernamePasswordAuthenticationFilter.class); // 2、验证Token http.addFilterBefore(new JwtAuthenticationFilter(authenticationManager()), UsernamePasswordAuthenticationFilter.class); // 3、自定义登录和权限异常提示 http.exceptionHandling().accessDeniedHandler(new JwtAuthenticationAccessDenied()).authenticationEntryPoint(new JwtAuthenticationEntryPoint()); // 4、退出 http.logout().logoutSuccessHandler(new JwtLogoutSuccessHandler()); }@Bean @Override public AuthenticationManager authenticationManager() throws Exception { return super.authenticationManager(); }}