vue2.0前端proxyTable跨域和jsonp跨域方法笔记

同域和跨域
同域：相同域名,相同端口，相同协议
跨域：
`URL 说明是否允许通信
http://www.domain.com/a.js
http://www.domain.com/b.js 同一域名，不同文件或路径允许
http://www.domain.com/lab/c.js

http://www.domain.com:8000/a.js
http://www.domain.com/b.js 同一域名，不同端口不允许

http://www.domain.com/a.js
https://www.domain.com/b.js 同一域名，不同协议不允许

http://www.domain.com/a.js
http://192.168.4.12/b.js 域名和域名对应相同ip 不允许

http://www.domain.com/a.js
http://x.domain.com/b.js 主域相同，子域不同不允许
http://domain.com/c.js

http://www.domain1.com/a.js
http://www.domain2.com/b.js 不同域名不允许`
使用 axios
找到目录下config文件夹下的index.js
vue2.0前端proxyTable跨域和jsonp跨域方法笔记
找到 proxyTable

改成如下图

注意

配置完成后要重启一下项目，否则会报错

axios安装和引入
npm install --save axios进行安装
在main.js中

import axios form axios
Vue.prototype.$axios = axios

然后就可以在组件中使用了

created:function (){
    this.$axios.get('/api/v2/movie/top250')
      //成功返回
      .then(response=>{
         console.log(response);
      })
      //失败返回
      .catch(error=>{
          console.log(error);
      })
 }

2019/5/6更新
在网上看到vue使用jsonp的方法跨域记录一下
首先安装依赖
npm i -S vue-jsonp

在main.js中导入vue-jsonp
import VueJsonp from ‘vue-jsonp’
Vue.use(VueJsonp)

然后就可以在组件中使用jsonp了
还是以豆瓣的接口为例

created() {
    let url = "https:/api.douban.com/v2/movie/in_theaters";
    this.$jsonp(url, {
      params: {
        count: 20,
        start: 0
      }
    })
      .then(res => {
        console.log(res);
      })
      .catch(error => {
        console.log(error);
      })
  }

vue2.0前端proxyTable跨域和jsonp跨域方法笔记
请求成功

个人学习笔记，如有错误请指出，谢谢！

vue2.0前端proxyTable跨域和jsonp跨域方法笔记

注意

相关推荐