springboot vue线上部署项目注意跨域问题

nginx配置

  server {listen 8080;server_name localhost;charset utf-8;location / {root /home/user/cf/vue/dist;index index.html index.htm;try_files $uri $uri/ /index.html;add_header 'Access-Control-Allow-Origin' '*';add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS, PUT, DELETE';add_header 'Access-Control-Allow-Headers' 'DNT, X-Mx-ReqToken, Keep-Alive, User-Agent, X-Requested-With, If-Modified-Since, Cache-Control, Content-Type';}error_page 405 = 200@405;location @405 {proxy_method GET;proxy_pass http://localhost:9090;}
}

vue中request.js

// 创建可一个新的axios对象
const request = axios.create({baseURL: 'http://xxx.xxx.xxx.xxx:9090',   // 后端的接口地址  ip:porttimeout: 30000                          // 30s请求超时
})

vue中vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({transpileDependencies: true,devServer: {port: 8080},chainWebpack: config =>{config.plugin('html').tap(args => {args[0].title = "管理系统";return args;})}
})

Springboot中config目录中 CorsConfig类

/*** 跨域配置*/
@Configuration
public class CorsConfig {@Beanpublic CorsFilter corsFilter() {UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();CorsConfiguration corsConfiguration = new CorsConfiguration();corsConfiguration.addAllowedOrigin("*"); // 1 设置访问源地址corsConfiguration.addAllowedHeader("*"); // 2 设置访问源请求头corsConfiguration.addAllowedMethod("*"); // 3 设置访问源请求方法source.registerCorsConfiguration("/**", corsConfiguration); // 4 对接口配置跨域设置return new CorsFilter(source);}
}

Springboot中config目录中 WebConfig类

@Configuration
public class WebConfig implements  WebMvcConfigurer {@Resourceprivate JwtInterceptor jwtInterceptor;// 加自定义拦截器JwtInterceptor，设置拦截规则@Overridepublic void addInterceptors(InterceptorRegistry registry) {
//        放行请求registry.addInterceptor(jwtInterceptor).addPathPatterns("/**").excludePathPatterns("/").excludePathPatterns("/login").excludePathPatterns("/register").excludePathPatterns("/files/**");}
}