vue2 axios报跨域问题

先看完整请求地址,注意看这里含有两个api

https://xxx:xxx/api/api/news/getNewsList

一、配置baseURL为'/api'，这一步很重要，千万不要写死完整协议+域名

import axios from 'axios';

const instance = axios.create({
  baseURL: '/api',  // ✅ 所有请求会自动加上 /api 前缀
  timeout: 10000    // 可选：设置请求超时
});

export default instance;

二、

 dev: {
    // Paths
    assetsSubDirectory: "static",
    assetsPublicPath: "/",
    proxyTable: {
      "/api": {
        target: "https://xxx.xxx.xxx.xxx:11122",
        secure: false,
        changeOrigin: true,
        pathRewrite: {
          "^/api": "/api" // ✅ 保留 /api 路径
        }
      }
    },
}

三、请求示例

axios.get('/api/news/getNewsList', {
  params: {
    pageNum: 1,
    pageSize: 15,
    type: 1
  }
})

说明一下，axios配置的baseURL为'/api'，所以，所有请求会自动加上 /api 前缀,
所以在

   pathRewrite: {
          "^/api": "/api" // ✅ 保留 /api 路径
        }

为什么需要保留呢，因为我们的请求地址中：https://xxx:xxx/api/api/news/getNewsList，含有两个“api”
如果接口只有一个“api”，则不需要保留：

  pathRewrite: {
          "^/api": "/" 
        }

这样跨域就没问题了，如果还是报跨域，则看看控制请求的地址是不是：http://127.0.0.1:80/api开头，若是则走了代理，如果还是之前的域名 ，说明没有走代理