解决Vue前端请求后端解决接口跨域问题

问题描述:在进行接口请求的时候跨域请求的错误。
解决Vue前端请求后端解决接口跨域问题_第1张图片
解决方法:
1、修改config文件下的index.js里面的proxyTable属性:

proxyTable: {
     
      '/api':{
     
        target:'http://xxx.xx.xx.xx:8080',
        changeOrigin: true,
        pathRewrite:{
     
          '^/trafficline':''
        }
      }
    },

说明:proxyTable里面的’/api’为目标请求接口的后的url名称

2、vue.config.js文件修改proxy属性:

proxy: {
     
      // 匹配所有以 /api 开头的url
      '/api': {
     
        // 请求的目标主机
        target: 'http://xxx.xx.xx.xx:8080',
        changeOrigin: true,
        ws: true
        // 这样重写会把路径中 /api 消去
        // pathRewrite: {
     
        //   '^/api': '/api'
        // }
      }
    }

3、简单的进行axios接口请求:

this.$http.get('/api/xxxxx?xxxx=1路&xxx=0926&xxxx=10',{
     
          headers: {
     
            'Content-type': 'application/json;charset=UTF-8'
            /*'Content-Type': 'text/plain;charset=utf-8'*/
          },
        }).then(function (response) {
     
            console.log(response,'response');
          })
          .catch(function (error) {
     
            console.log(error);
          });

进行上述修改后,接口跨域请求问题得到解决。

你可能感兴趣的:(vue)