vue3+axios跨域请求外网地址一直是localhost

各位好，本菜菜最近自学vue3,在用axios进行跨域请求，一直报404错误，发现虽然给了具体外网地址，但是请求地址还是localhost。
已经在百度上找了很多，基本上把度娘给的解决方案都试了，还是不行，

找不到办法了，请各位点一下~~

环境：

img

代码目录

img

package.json

img

vue.config.js

img

main.js

img

具体调用

img

运行结果

img

正常配置了跨域就是这样的，请求地址是你本地项目的路径

源于chatGPT仅供参考

在 Vue 3 中使用 Axios 发起跨域请求时，可能会遇到默认请求地址为 localhost 的情况。这是因为浏览器的同源策略限制了跨域请求。

要解决这个问题，您可以采取以下步骤：

  1. 在后端服务器上设置允许跨域请求：如果您有控制后端服务器的权限，可以在服务器端的响应中添加 CORS（跨域资源共享）头部，以允许跨域请求。例如，在响应头部添加 Access-Control-Allow-Origin 字段并设置合适的值。

  2. 使用代理进行跨域请求：Vue CLI 提供了开发环境下的代理配置，您可以使用该代理来转发请求，绕过浏览器的同源策略。在 vue.config.js 文件中，可以设置 devServer.proxy 配置项，将请求转发到目标外网地址。

    // vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://external-domain.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};

    上述示例中，所有以 /api 开头的请求都会被转发到 http://external-domain.com 这个外网地址。

    在代码中通过发送请求时使用相对路径 /api 即可实现跨域访问：

    axios.get('/api/your-endpoint')
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 处理错误
  });

通过上述步骤，您应该能够在 Vue 3 中使用 Axios 进行跨域请求外网地址。请根据您的具体情况选择适合的解决方案，并确保后端服务器已正确配置允许跨域请求。

  • 这篇博客: vue中axios的封装使用中的 3. 配置跨域 在根目录下vue.config.js里边 部分也许能够解决你的问题, 你可以仔细阅读以下内容或跳转源博客中阅读:
  • 	module.exports = {
	    publicPath: './',
	    //配置跨域请求
	    devServer: {
	        open: true,    //是否自动打开浏览器
	        https: false,    //是否开启https
	        hotOnly: false,
	        proxy: { // 配置跨域
	            '/api': {
	                target: 'http://********',   //请求接口域名  
	                ws: true,
	                secure: false,
	                changOrigin: true,    //是否允许跨越
	                pathRewrite: {
	                    '^/api': ''
	                }
	            }
	        },
	        before: app => { }
	    }
	}

解决了没有,咋解决的?