vue+springboot项目内网穿透报错

我有1台win10电脑，有一个vue+springboot项目，vue项目使用本地80端口，vue通过axios与后端9998端口进行交互，实现$http.get，post等操作，现在将80端口进行内网穿透，映射到公网某地址，访问公网某地址，可以看到vue登录界面，但点击登陆，却显示axios报错。把9998端口也内网穿透映射到公网另一地址，前端axios.defaults.baseURL= "http://localhost:9998"改为该公网地址就可正常登陆，为什么？

axios报错内容：ERROR
Network Error AxiosError: Network Error at XMLHttpRequest.handleError (webpack-internal:///./node_modules/axios/lib/adapters/xhr.js:172:14)

如果你在本地将80端口进行内网穿透映射到公网某地址，通过该公网地址可以看到Vue登录界面，表明内网穿透已经正常工作。但是，当你点击登录按钮时，出现了Axios的网络错误。这种情况通常是由于访问后端API时出现了跨域问题导致的。浏览器会执行同源策略，即限制在页面中使用JavaScript发起的请求只能访问与页面同源的资源。如果你的Vue项目运行在公网地址（例如 http://example.com），而后端API运行在本地的9998端口（例如 http://localhost:9998），这就是一个跨域请求。为了解决跨域请求问题，你需要在后端的Spring Boot应用程序中配置允许跨域访问的设置。可以通过添加适当的CORS（跨域资源共享）配置来实现。

在Spring Boot应用程序中，你可以使用@CrossOrigin注解来处理跨域请求。例如，在你的Controller类上添加注解：

@CrossOrigin(origins = "http://example.com") // 替换为你的Vue公网地址
@RestController
public class MyController {
    // ...
}

通过这样的配置，后端就会发送CORS标头，允许来自Vue项目公网地址的跨域请求。请确保在Spring Boot应用程序中进行了正确的跨域配置，并将http://example.com替换为你的Vue项目的公网地址。这样应该可以解决Axios的网络错误问题。试一试，如果有帮助的话别忘了采纳一下，谢谢

• 这篇博客: spring boot后端和vue项目使用axios进行数据交互参数传递和接收总结记录中的 2.4.2、发送post请求 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  

• 后端使用pojo对象接收方式
  后端
  
  前端
  

  后端使用map接收的方式
  后端
  
  

  前端
  
  或者前端
  
  

需要具体方案可以艾特我。

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  devServer: {  
      proxy: {
        '/blogApi': {
        target: 'http://localhost:8081', //访问地址
        changeOrigin: true,
        // secure: false, //只有代理https 地址需要次选项
        pathRewrite: {
            '^/blogApi': ''
            }
          }
        },
  },
  // 修改标题
  chainWebpack: (config) => {
    config.plugin("html").tap((args) => {
      args[0].title = "rnfblog";
      return args;
    });
  },
})

http {
        upstream blogapi {
            server localhost:8081;
            ## 可扩展代理服务，通过负载均衡实现可靠性和可用性
            #server localhost:8082;
            #server localhost:8083;
        }
        # 反向代理，对 swagger-ui 不友好
        server {
            listen    9001;
            server_name localhost;
            # Reverse proxy backend server
            location / {
                root html;
                index index.html idex.htm;
                proxy_pass http://blogapi;
            }
        }
}