AxiosError: Network Error

Question

vue项目打包到springboot中，通过tomcat运行，进入网页，输入账号密码，点击登录，提示
AxiosError: Network Error
如果没有集成，前后端运行，可以正常登录

vue.config.js代码如下

module.exports = {
    devServer: {
      open: true, //配置自动启动浏览器
      host: "localhost",
      port: 9132,
    },
    lintOnSave: false
  }

Answer 1

引自免费微信小程序：皆我百晓生

看起来你在尝试将Vue项目与Spring Boot应用整合，并通过Tomcat部署。遇到的问题是当用户尝试在部署后的环境中登录时，收到AxiosError: Network Error的错误信息。这个问题通常是由于跨域（CORS）问题、网络连接问题或者是前端代码中的配置错误导致的。

首先，我们需要检查Vue项目和Spring Boot应用是否在同一台机器上并且可以通过相同的域名访问。如果你的前端和后端是在不同的服务器上，确保你已经在Spring Boot应用中正确设置了CORS策略。在Spring Boot中，你可以使用WebSecurityConfigurerAdapter类来配置CORS。下面是一个简单的例子：

import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.WebSecurityConfigurerAdapter;

@Configuration
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http.cors().and()
                .csrf().disable(); // 如果已经处理了CSRF，可以禁用它
    }

    @Bean
    CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration config = new CorsConfiguration();
        config.setAllowedOrigins(Arrays.asList("*")); // 允许所有源访问
        config.setAllowedMethods(Arrays.asList("GET", "POST", "PUT", "DELETE", "OPTIONS"));
        config.setAllowCredentials(true);
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);
        return source;
    }
}

如果你的应用都在同一台机器上，可能是前端的axios请求没有正确设置基础URL。在你的Vue项目中，找到axios的配置文件，通常位于src目录下的api.js或者http.js等文件中。然后修改baseURL为Spring Boot应用的实际地址，例如：http://localhost:8080/api/（假设Spring Boot应用监听在8080端口）。

如果上述步骤都无法解决问题，可能是因为代理配置不正确。在你的Vue项目中，打开vue.config.js，并添加以下代码，这会确保开发环境中的API请求被转发到正确的地址：

module.exports = {
    devServer: {
        open: true,
        host: "localhost",
        port: 9132,
        proxy: {
            "/api": {
                target: "http://localhost:8080", // 这里填写Spring Boot应用的地址
                ws: true, // 如果有WebSocket支持，设置为true
                changeOrigin: true,
                pathRewrite: {
                    "^/api": "" // 去除路径前缀
                }
            }
        }
    },
    lintOnSave: false
};

这样，所有从/api开头的请求会被代理到Spring Boot应用。记得替换上面的"http://localhost:8080"为你实际的Spring Boot应用地址。

按照这些步骤操作后，应该能解决登录失败的问题。如果还有问题，请提供更详细的错误日志，以便进一步分析。