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');//允许访问的方式 
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容