解决Vue前端请求后端解决接口跨域问题(开发环境下)

问题描述：在进行接口请求的时候跨域请求的错误。

解决方法：
1、修改config文件下的index.js里面的proxyTable属性：

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

说明：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);
          });

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

4、生产环境下的跨域问题一般由后端解决(安全性问题)