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'
  
  
  例子：
  
  
  
  
  

• 附：后台配置

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