Nuxt配置实现axios在开发时的跨域代理

首先安装插件npm install @nuxtjs/axios，接下来在nuxt.config.js里进行配置，如下：

module.exports = {
  modules: ["@nuxtjs/axios"],
  axios: {
    proxy: true,
    prefix: "/api", // baseURL
    credentials: true,
  },
  proxy: {
    "/api": {
      target: "http://192.168.0.1:3000", // 代理地址
      changeOrigin: true,
      pathRewrite: {
        "^/api": "", // 将 /api 替换掉,如果请求地址中有 /api 则不必替换
      },
    },
  },
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

如果需要额外配置 axios，可以通过 plugins 来进行配置。在 /plugins 目录下增加 axios.js ，并引进配置文件。如下：

module.exports = {
  plugins: [{ src: "~/plugins/axios" }],
};

1
2
3

在 axios.js 文件里就可以进行配置了，如下：

export default function (app) {
  let axios = app.$axios;
  // 基本配置
  axios.defaults.timeout = 10000;
  axios.defaults.method = "post";
  // axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
  (axios.defaults.headers = {
    "Content-Type": "application/json;charset=UTF-8",
  }),
    (axios.defaults.transformRequest = [
      function (data) {
        // 将参数对象转成JSON形式
        data = JSON.stringify(data);
        return data;
      },
    ]),
    // 请求回调
    axios.onRequest((config) => {});

  // 返回回调
  axios.onResponse((res) => {});

  // 错误回调
  axios.onError((error) => {
    const response = error.response; // 响应对象
    const data = response.data; // 响应数据
    const status = response.status; // 响应状态码
  });
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

# SSR 使用 Axios

export default {
  async asyncData({ $axios }) {
    let list = await $axios.get("/list");
    return {
      list,
    };
  },
  data() {
    return {
      list: [],
    };
  },
};

1
2
3
4
5
6
7
8
9
10
11
12
13

# 非 SSR 使用 Axios

export default {
  data() {
    return {
      list: [],
    };
  },
  async created({ $axios }) {
    let list = await $axios.get("/list");
    this.list = list;
  },
};

1
2
3
4
5
6
7
8
9
10
11

#Nuxtjs

上次更新: 2024/02/22, 14:16:55

Token的设置与存储→