vue中使用axios技术解决前端跨域问题

vue中使用axios技术解决前端跨域问题需求：表面上前端发送请求：http://localhost:8081/api/user实际上应该访问Linux系统的接口：http://虚拟机IP:端口/api/user方法：步骤1：在config文件中index.js添加如下代码// 进行跨域处理proxyTable: {'/api': {target: 'http://192.168.233.128:

hhh233dd

498人浏览 · 2021-02-02 23:06:18

hhh233dd · 2021-02-02 23:06:18 发布

vue中使用axios技术解决前端跨域问题

需求：
表面上前端发送请求：http://localhost:8081/api/user
实际上应该访问Linux系统的接口：http://虚拟机IP:端口/api/user

方法：
步骤1：在config文件中index.js添加如下代码

// 进行跨域处理
    proxyTable: {
      '/api': {
        target: 'http://192.168.233.128:80',//设置你调用的接口域名和端口号 
        changeOrigin: true,     //跨域
        pathRewrite: {
          '^/api': '/'          //这里理解成用‘/api’代替target里面的地址，后面组件中我们掉接口时直接用api代替 比如我要调用'http://10.1.5.11:8080/xxx/duty?time=2017-07-07 14:57:22'，直接写‘/api/xxx/duty?time=2017-07-07 14:57:22’即可
        }
      }
      },

步骤二：在config文件中的dev.env.js添加如下代码，设置开发环境的API_HOST。

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_HOST: "/api/"
})

步骤三：在main.js中添加以下代码，默认为请求路径的首路径

axios.defaults.baseURL = '/api';//每次发送一个请求都会带一个/api的前缀

步骤四：发送以下post请求

//这里是post请求
      this.$http({
        method: "post",
        url: "/user",
        data: {
          name: "xiaoming",
          info: "12",
        },
      })
        .then(function (response) {
          console.log(response);
        })
        .catch(function (error) {
          console.log(error);
        });