前端axios直接调用api端口的几种方法

在前端中使用 axios 库可以直接调用后端的 API 接口，以下是几种方法：

1. 直接调用

可以使用 axios 库直接调用后端的 API 接口，例如：

axios.get('/api/user')
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.log(error);
  });

这里的 `/api/user` 是后端的 API 接口地址。该方法可以快速方便地调用后端的 API 接口，但需要注意跨域问题。

2. 配置代理

在开发环境中，可以通过配置代理来解决跨域问题。例如，在 `vue.config.js` 或 `webpack.config.js` 文件中添加以下代码：

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

这里的 `/api` 是前端请求的接口地址前缀，`http://localhost:3000` 是后端的地址。这种方法可以将前端请求的接口地址转发到后端的地址，解决跨域问题。

3. 设置基础 URL

可以在 axios 实例中设置基础 URL，例如：

const instance = axios.create({
  baseURL: 'http://localhost:3000/api'
});

instance.get('/user')
  .then(response => {
    console.log(response);
  })
  .catch(error => {
    console.log(error);
  });

这里的 `http://localhost:3000/api` 是后端的地址，通过设置基础 URL，可以在后面的请求中省略前缀，方便调用。