如何用Axios请求同域名不同端口后端且不指定完整域名

方法1：利用window.location优雅生成baseURL #

直接通过浏览器原生的window.location对象获取当前页面的协议和主机名，拼接目标端口与路径，避免手动拆分字符串的繁琐：

import axios from 'axios';

const buildBaseURL = () => {
  const { protocol, hostname } = window.location;
  return `${protocol}//${hostname}:8080/foo`;
};

export const AXIOS = axios.create({
  baseURL: buildBaseURL()
});

这种方式会自动适配前端当前运行的环境——不管是开发环境的http://localhost，还是生产环境的https://yourdomain.com，都会生成对应协议+主机名+目标端口的合法baseURL，完全无需硬写固定域名。

方法2：通过Axios请求拦截器动态补全URL #

如果不想在初始化Axios实例时固定baseURL，可以用请求拦截器在每次请求前动态修正路径：

import axios from 'axios';

export const AXIOS = axios.create();

AXIOS.interceptors.request.use(config => {
  // 仅对未指定完整URL的请求补全端口前缀
  if (!config.baseURL && !config.url.startsWith('http')) {
    const { protocol, hostname } = window.location;
    config.url = `${protocol}//${hostname}:8080/foo${config.url}`;
  }
  return config;
});

调用时依旧使用AXIOS.post(url, json)即可，拦截器会自动为相对路径添加正确的端口前缀，灵活性更高。

方法3：开发环境用脚手架代理（Vue/React等） #

如果是开发阶段，直接通过项目脚手架的代理配置转发请求，Axios无需额外配置：

Vue项目（vue.config.js） #

module.exports = {
  devServer: {
    proxy: {
      '/foo': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
};

React项目（package.json） #

{
  "proxy": "http://localhost:8080"
}

此时Axios的baseURL只需设为'/foo'，开发服务器会自动将/foo开头的请求转发到http://localhost:8080/foo。生产环境若后端与前端同域名不同端口，可通过Nginx反向代理实现同样效果，前端代码无需任何改动。

原配置无效的原因 #

你之前写的baseURL: ":8080/foo"不符合URL解析规范：浏览器会将开头的冒号视为路径的一部分，因此会拼接成http://localhost/:8080/foo，这是URL解析的默认行为，并非Axios的问题。

内容的提问来源于stack exchange，提问作者DavesPlanet