vue接口通过但控制台报错

Question

vue项目接口200通过，但接口控制台报错

/**
 * 表示一次http请求的结果
 */
export class Result {
 
  success() {
    return this.code === 200;
  }
  message(){
    return this.msg
  }
  code(){
    return this.code  
  }
  data(){
    return this.data
  }
}
 
function convertResult(resp) {
  console.log(resp);
  return resp.json().then(result => {
    console.log(result);
    return Object.assign(new Result(),result);
  });
}
 
/**
 * 发送一次get方法请求
 * @param url 请求地址
 * @param params 请求参数对象 会被解析后填充成?a=b的格式
 */
export const doGet = (url, params) => {
  const param = new URLSearchParams();
  for (let k in params) {
    param.append(k, params[k]);
  }
  return fetch(url + '?' + param.toString()).then(t => convertResult(t));
};
/**
 * 发送一次get方法请求
 * @param url 请求地址
 */
export const doGetDirect = (url) => {
  return fetch(url).then(t => convertResult(t));
};
/**
 * 发送一次post方法请求，请求参数对象会被以x-www-form-urlencoded格式编码放入body中
 * @param url 请求地址
 * @param params 参数对象
 */
export const doPostUrlEncoding = (url, params) => {
  console.log("已发送！");
  const param = new URLSearchParams();
  for (let k in params) {
    param.append(k, params[k]);
  }
  return fetch(url, {
    method: "POST",
    body: param
  }).then(t => convertResult(t));
};
/**
 * 发送一次post方法请求，请求参数对象会被以form-data格式编码放入body中
 * @param url 请求地址
 * @param params 参数对象
 */
export const doPostFormData = (url, params) => {
  const param = new FormData();
  for (let k in params) {
    param.append(k, params[k]);
  }
  console.log(param);
  console.log(params);
  return fetch(url, {
    method: "POST",
    // mode: 'no-cors',
    body: param,
  }).then(t => convertResult(t));
};
/**
 * 发送一次post方法请求，请求参数对象会被以json字符串编码放入body中
 * @param url 请求地址
 * @param params 参数对象
 */
export const doPostJson = (url, params) => {
  return fetch(url, {
    method: "POST",
    body: JSON.stringify(params),
    params: params,
    headers: {
      'Content-Type': 'application/json'
    }
  }).then(t => convertResult(t));
};
//# sourceMappingURL=generic.js.map

[](

    login() {
            doPostFormData("http://localhost:8071/user/login", this.loginForm).then((res) => {
              console.log(res);
              if (res.code == 200) {
                  // setToken('token', res.data)
                  this.$message({ message: '登录成功', type: 'success' })
                  this.$router.push('/index')
                  // Cookies.set('username', this.loginForm.username)
              } else {
                  this.$message.error('登录失败，请检查账号密码是否正确！')
              }
          })
        },


```)
```javascript
module.exports = {
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*', // 允许所有域名的脚本访问该资源
    },
    proxy: {
      "/api": {
        // target: process.env.TARGET,
        target: 'http://localhost:8071',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
}

运行结果及详细报错内容

我的解答思路和尝试过的方法，不写自己思路的，回答率下降 60%

尝试在代理服务器配置是添加
headers: {
'Access-Control-Allow-Origin': '*', // 允许所有域名的脚本访问该资源
},
也在接口封装处使用过mode：“no-cors”

我想要达到的结果，如果你需要快速回答，请尝试 “付费悬赏”

想要解决此报错

Answer 1

这个问题我来回答你，若有帮助，还望采纳，点击回答右侧采纳即可。
这貌似就是跨域导致的报错，我给你提供两种思路吧。
解决办法1：
把访问后台的地址，localhost改成对应的本机ip。
解决办法2：
后端服务也可以处理下跨域请求，配置跨域策略即可，比如在接口Controller请求上添加@CrossOrigin 注解等。@CrossOrigin可以处理跨域请求，让你能访问不是一个域的文件。同域是指协议、ip地址、端口三者全部相同的情况。