vue+axios 跨域问题

2022-07-13  本文已影响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>
上一篇下一篇

猜你喜欢

热点阅读