跨域请求

原生jsonp方式

<script>
    function call(res){
        console.log(res)
    }
    function getJSONP(){
        let script = document.createElement("script");
        script.type = "text/javascript";
        script.src="https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su
            ?callback=call"
        document.querySelector("head").appendChild(script)
    }
</script>

jquery提供的jsonp方式（vue中自行引入jQuery）

$.ajax({
    url:"",
    type:"GET",   //请求方式
    dataType:"jsonp",    //返回的数据类型设置为jsonp方式（必写）
    jsonp:"callback",    //指定一个查询参数名称callback(必写)
    jsonpCallback:"handle",  //设置回调函数名
    success:function(data){
        console.log(data)
    }
})

方向代理方式

vue框架中的config目录下的index.js文件中配置
    proxyTable: {
      '/api': {
            target: 'http://localhost:3000/api/',
            ws:true,
            changOrigin: true,
            pathRewrite: {
              '^/api': ''
            }
        }
    },
组建中用axios获取数据
    methods:{
        del(item){
            this.$axios.get(`/api/profiles/delete/${item._id}`).then(response=>{
                this.reload();
            }).catch(error=>{
                console.log(error)
            })
        },
        reload(){
            this.$axios.get('/api/profiles').then(response=>{
            this.tableData=response.data
            }).catch(error=>{
                console.log(error)
            })
        },
       
    }

vue-resource来请求数据

1. vue项目中下载vue-resource
    npm install vue-resource --save
2. 在main.js中引入
    import vueResource from "vue-resource"
    Vue.use(vueResource)
3. 在mounted中
    mounted(){
        //跨域请求
        this.$http.jsonp("https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su",{
            params:{
                "wd":"七夕"
            },
            headers:{
                token:"acxd"
            },
            jsonp:'cb'
        }).then(res=>{
            console.log(res)
        },error=>{
            console.log(error)
        });
        //get请求方式
        get(){
            this.$http.get("../../index.html",
              {
                params:{
                  userId:"101"
                },
                headers:{
                  token:"abccd"
                }
              }
            ).then(res=>{
              this.msg = res.data
              console.log(res.data)
            },error=>{
              console.log(error)
            })
          },
        //post请求方式
        post () {
              // 第一个是地址，第二个是提交数据，第三个是格式 为普通表单
              this.$http.post('url', {}, {emulateJSON: true}).then( 
                  result=>{
                      console.log(result.data)
                  }
              )
          },
    }

vue-resource全局拦截

mounted(){
    //vue-resource的去哪聚拦截器
    Vue.http.interceptors.push(function (request,next) {
      console.log("request init");
      next(function(response) {
        console.log("response init");
        return response;
      });
    });
},
http:{
    //全局路径的配置
    root:"http://localhost:8080/"
}