JS 前端跨域解决方案

使用JQuery提供的jsonp

methods: { 
  getData () { 
    var self = this 
    $.ajax({ 
        url: 'http://f.apiplus.cn/bj11x5.json', 
        type: 'GET', 
        dataType: 'JSONP', 
        success: function (res) { 
        self.data = res.data.slice(0, 3) 
        self.opencode = res.data[0].opencode.split(',') 
      } 
  }) 
} 
}

依靠vue-cli脚手架搭建的项目

proxyTable: { 
  '/api': {  //使用"/api"来代替"http://f.apiplus.c" 
  target: 'http://f.apiplus.cn', //源地址 
  changeOrigin: true, //改变源 
  pathRewrite: { 
      '^/api': ' ' //路径重写 
    } 
  } 
}

 使用：
    getData () { 
          axios.get('/api/bj11x5.json', function (res) { 
          console.log(res) 
    })

在VUE项目中引入jQuery

//下载
cnpm install jquery --save-dev

//在webpack.base.conf.js文件中加入

plugins: [
    new webpack.ProvidePlugin({
        $: "jquery",
        jQuery: "jquery"
  })
 ],

//在需要的temple里引入
import $ from 'jquery'


例子：

<template>
    <div class="source">{{data}}</div>
</template>

<script>
import $ from 'jquery'
export default({
    name:"source",
    data(){
      return{
        data:""
      }
  },
created(){
  this.getData()
},
methods:{
    getData () {
      var self = this
      $.ajax({
        url: '你要请求的url',
        type: 'GET',
        dataType: 'JSONP',
        success: function (res) {
            self.data = res.result
          }
      })
    }
  }
})
</script>

附：后台配置

header('Access-Control-Allow-Origin:*');//允许所有来源访问 
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式