vue接口通过但控制台报错

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

img

/**
 * 表示一次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': ''
        }
      }
    }
  },
}
运行结果及详细报错内容

img

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

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

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

想要解决此报错

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

望采纳。。。。。。

方法一：临时解决方案

Windows ： Windows + R

chrome --disable-web-security --user-data-dir

MacOS：

open -na Google\ Chrome --args --user-data-dir=/tmp/temporary-chrome-profile-dir --disable-web-security --disable-site-isolation-trials

添加chrome扩展程序： https://chrome.google.com/webstore/detail/moesif-orign-cors-changer/digfbfaphojjndkpccljibejjbppifbc/related?hl=en-GB

方法二：尝试一下你可以试试：


module.exports = {
  devServer: {
    headers: {
      'Access-Control-Allow-Origin': '*', // 允许所有域名的脚本访问该资源
      'Access-Control-Allow-Methods': 'OPTIONS, DELETE, POST, GET, PATCH, PUT',
      'Access-Control-Max-Age': '3600',
      'Access-Control-Allow-Credentials': 'true',
      'Access-Control-Allow-Headers': 'Content-Type'
    },
    proxy: {
      "/api": {
        // target: process.env.TARGET,
        target: 'http://localhost:8071',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  },
}

通常调用接口的时候，直接调/api/user/login，不用加上前面的路径，因为你已经配置了跨域

  • 在你的logIn函数里面不需要协商前面的主机名，这会导致跨域问题
  • 你已经定义了一个proxy和/api重写条目，所以解决方法是login里面的内容改为
    doPostFormData("/api/user/login", this.loginForm)

你的报错问题是跨域问题。
解决方案：跨域问题 ，一般都是后端进行处理，可以让后端程序设置CORS允许跨域访问。

这个要么你前端服务端口和改为和后端一致的，要么后端添加允许跨域

比如这样，在响应头里添加这些


response.setHeader("Access-Control-Allow-Origin", originHeader);
response.setContentType("application/json;charset=UTF-8");
response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "Content-Type,Access-Token");
// 如果要把Cookie发到服务器，需要指定Access-Control-Allow-Credentials字段为true
response.setHeader("Access-Control-Allow-Credentials", "true");
response.setHeader("Access-Control-Expose-Headers", "*");

1.问题原因是跨域导致的
2.你试图解决跨域添加了devServer的配置,方向是对的,但是没有生效,你的配置的含义是以api打头的url需要代理到8071端口,但是你请求的url不是api打头
3.解决方案,去掉localhost:8071添加api

http://localhost:8071/user/login
修改为
/api/user/login

望采纳！！！点击回答右侧采纳即可！
应该是CROS没有配置好

跨域了，在vue.config.js中其实是用/api反向代理为http://localhost:8071/，所以你只要把请求地址改为/api/user/login即可

望采纳！！！点击回答右侧采纳即可！
这个问题可能是由于服务端返回的数据格式不符合预期造成的。在代码中，使用了fetch API来发起请求，fetch API返回的是一个Promise对象，在使用.json()方法将其转换为json格式后使用Object.assign方法将其与Result类进行合并。

我建议检查服务端返回的数据是否符合预期，包括数据格式和字段名是否正确。如果数据格式正确，可以在convertResult函数中添加一些console.log语句来调试结果数据的具体情况。