vuecli4 配置反向代理

Question

vue proxy实现跨域访问，访问失败

问题出现的环境背景及自己尝试过哪些方法

vuecli4.2.3 通过在vue项目根目录下创建vue.config.js文件，添加 proxy配置相关属性
方法：一直在修改配置文件，和切换调用接口的方法

相关代码

vue.config.js

module.exports={
    devServer: {
        proxy: {
            '/api': {                //这里最好有一个 /
                target: 'http://106.ihuyi.com',         // 服务器端接口地址
                ws: true,            //如果要代理 websockets，配置这个参数
                      // 如果是https接口，需要配置这个参数
                changeOrigin: true,  //是否跨域
                pathRewrite: {
                    '^/api': '/api'
                }
                
            }
        }

    }
}

vue组件下的$axios.post

   this.$axios.post('/api/webservice/sms.php?method=Submit',{data:data}).then((res=>{
               console.log(res);
          }))

你期待的结果是什么？实际看到的错误信息又是什么？

期待结果是返回当问当前页面的数据结果，/api也并没有在请求头上被解析，实际看到的错误信息是 xhr.js?ec6c:178 POST http://localhost:8080/api/webservice/sms.php?method=Submit 404 (Not Found)
希望理解的大佬帮忙讲解一下，万分感谢！！！
请求网址中未解析api

 axios({
      method:'get',
      url:'/webservice/sms.php',
      params: {
        method:'Submit',
        account:'C84981474',
        password:'d250a9ac9b15714ecd0687c7d7b569c2',
        mobile:'%E6%89%8B%E6%9C%BA%E5%8F%B7%E7%A0%81',
        content:'%E6%82%A8%E7%9A%84%E9%AA%8C%E8%AF%81%E7%A0%81%E6%98%AF%EF%BC%9A1234%E3%80%82%E8%AF%B7%E4%B8%8D%E8%A6%81%E6%8A%8A%E9%AA%8C%E8%AF%81%E7%A0%81%E6%B3%84%20%E9%9C%B2%E7%BB%99%E5%85%B6%E4%BB%96%E4%BA%BA%E3%80%82'
      }
  });

一个是按照您的代码修改之后一个是直接访问成功的接口报的跨域问题

Answer 1

http://106.ihuyi.com/api/webs... 如果接口路径是这个没错的话，那就是接口不存在（404），不是前端的问题。

  // vue.config.js
  devServer: {
    port:8080,
    host:'0.0.0.0',
    proxy: {
      '/': {
        target:"http://106.ihuyi.com/",
        changeOrigin:true,
        ws:false,
       },
    }
  },

  axios({
      method:'get',
      url:'/webservice/sms.php',
      params: {
        method:'Submit',
        account:'C84981474',
        password:'d250a9ac9b15714ecd0687c7d7b569c2',
        mobile:'%E6%89%8B%E6%9C%BA%E5%8F%B7%E7%A0%81',
        content:'%E6%82%A8%E7%9A%84%E9%AA%8C%E8%AF%81%E7%A0%81%E6%98%AF%EF%BC%9A1234%E3%80%82%E8%AF%B7%E4%B8%8D%E8%A6%81%E6%8A%8A%E9%AA%8C%E8%AF%81%E7%A0%81%E6%B3%84%20%E9%9C%B2%E7%BB%99%E5%85%B6%E4%BB%96%E4%BA%BA%E3%80%82'
      }
  });