在vue2上用axios发起Post模拟注册的时候,调用接口,提示报错:

        axios({
          method: 'post',
          url: 'http://1.12.254.80:8080/api/user/register',
          // url: '/user/api/user/register',
          data: { // 请求体数据
            userAccount: userName,
            userPassword: pwd1,
            checkPassword: pwd2
          }
        }).then(res => {
          if (res.data === -1) {
            alert('注册失败,用户名被占用啦')
          } else {
            console.log('注册成功')
            alert('注册成功!您可以登录啦')
          }
        })

 接口:http://1.12.254.80:8080/api/user/register

 方式:POST

 数据:用户名、密码、确认密码

点击注册按钮,发起POST请求以后发生错误,一个跨域的问题

这个时候在前端身上解决跨域的问题即可

这里我创建的vue2项目是没有config文件夹的,也就不能修改到里面的index文件,所以手动配置

1、找到vue文件夹下的vue.config.js文件

如果没有该文件,就手动在根目录上创建一个

复制代码

module.exports = {
  // 开发服务器
  devServer: {
    port: 8082, // 修改启动端口号
    proxy: {
      '/user': { // 请求相对路径以 /user 开头的,才会走这里的配置
        target: 'http://1.12.254.80:8080', // 这个就是后端地址
        changeOrigin: true,
        pathRewrite: {
          '^/user': ''
        }
      }
    }
  },
  publicPath: './'
}

 个人提示:

        1、这里的端口号可以修改一下,默认的vue项目启动都是8080,我这里的Api端口号就冲突了,代理后就给我报404..(不知道是不是这个的问题,在没改端口之前请求都失败了,该端口后就成功了)

2、在axios上修改url地址

        axios({
          method: 'post',
          url: 'user/api/user/register',
          data: { // 请求体数据
            userAccount: userName,
            userPassword: pwd1,
            checkPassword: pwd2
          }
        })

axios方法中的url参数是配置代理以后的

3、测试

成功辣

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐