vue项目中使用axios请求数据遇到跨域和请求头

安装

npm install --save axios

在项目内安装包时, 如果使用npm就一直使用, 不要cnpm和npm进行混用

情况一: 无阻拦直接拿到数据

<script>
import axios from 'axios'

export default {
     
     
  mounted () {
     
     
    // ajax 请求 情况一: 某力惠
    // 没有跨域, 没有请求头 都可以访问
    axios.get('http://www.mei.com/appapi/home/eventForH5?params=%7B%7D&timestamp=1611801779867&summary=7f378002aedb16969f1b2c721faaa7d4&platform_code=H5').then(res => {
     
     
      console.log(res.data)
    })
  }
}
</script>

情况二: 解决跨域

<script>
import axios from 'axios'

export default {
     
     
  mounted () {
     
     
    // ajax 请求 情况二: 某眼
    // 需要先解决跨域, 在vue.config.js 文件内配置
    axios.get('/ajax/movieOnInfoList?token=&optimus_uuid=A8BDB550611311EBA1E831309AD47DB36154E4D099BB40CCBCE1047663ACCB95&optimus_risk_level=71&optimus_code=10').then(res => {
     
     
      console.log(res.data)
    })

  }
}
// 完整的 url
// https://m.maoyan.com/ajax/movieOnInfoList?token=&optimus_uuid=A8BDB550611311EBA1E831309AD47DB36154E4D099BB40CCBCE1047663ACCB95&optimus_risk_level=71&optimus_code=10
</script>

vue.config.js 文件, 自己创建的vue配置文件 修改配置文件后, 想要生效必须重启项目

• 

// 项目配置文件
module.exports = {
    
    
  // 关闭eslint , 默认是true
  // lintOnSave: false

  // 配置反向代理, 解决请求时的跨域
  devServer: {
    
    
    proxy: {
    
    
      '/ajax': {
    
     // 只要是以 '/ajax' 开头的ajax请求都会自动加上 target 属性值
        target: 'https://m.maoyan.com',
        changeOrigin: true
      }
    }
  }
}
******这个文件时自己创建的********高亮线******修改完这个文件记得重新启动项目*****************

情况三: 解决携带请求头问题

<script>
import axios from 'axios'

export default {
     
     
  mounted () {
     
     
    // ajax 请求 情况三: 某坐
    // 需要解决请求头问题, 该网站请求头在浏览器内可以找,未加密
    // (完整写法而已)
    axios({
     
     
      url: 'https://m.maizuo.com/gateway?cityId=310100&pageNum=1&pageSize=10&type=1&k=3150504',
      headers: {
     
     
        'X-Client-Info': '{"a":"3000","ch":"1002","v":"5.0.4","e":"1611800680438168268570625","bc":"310100"}',
        'X-Host': 'mall.film-ticket.film.list'
      }
      // method: 'get'  get请求可不写
    }).then(res => {
     
     
      console.log(res.data)
    })
  }
}
</script>