美文网首页
vue+axios 跨域问题

vue+axios 跨域问题

作者: 程序猿的小生活 | 来源:发表于2022-07-13 13:20 被阅读0次

    1.在项目一级目录下创建vue.config.js文件(改文件会自动加载,无需调用)

    2.在vue.config.js文件中设置代理

    const { defineConfig } = require('@vue/cli-service')
    module.exports = defineConfig({
      devServer:{
         proxy:
         {
             "/api":{// /api代替 http://192.168.xx.xx:xxxx 
                 target:"http://192.168.xx.xx:xxxx ",//请求地址的服务器地址即需要代理的地址
                 ws:true,//启用ws
                 changOrigin:true,//允许同源
                   pathRewrite:{//匹配/api 设置为""
                       "^/api":""
                   }
             }
         }
          
      }
    })
    
    

    3. 调用

    <script>
        import axios from "axios"//引入axios
        export  default{
            
            data(){
                return{
                    
                }
                
            },
            methods:{
            
        
                    //  http://192.168.xx.xx:xxxx/xxx/xxx/test.do
                                    //切记使用/api代替http://192.168.xx.xx:xxxx 因为只有检测到/api才会启用代理
                go(){
                var _this = this//必须写在方法里面
                axios({
                  method: 'post',
                  url: '/api/xxx/xxx/test.do',
                  params: {
                    start: "0",
                    pageSize: "10",
                    params:{
                        title: "",
                        status: "1",
                    }
                  }
                }).then(function (response) {
                   _this.msg = response.data.message;
                  })
                  .catch(function (error) {
                    console.log(error);
                  });
                
            }
            
        }
        
    </script>
    

    相关文章

      网友评论

          本文标题:vue+axios 跨域问题

          本文链接:https://www.haomeiwen.com/subject/nizzbrtx.html