关于Vue-cli 跨域,即使是非自己的服务器也可以g…

2018-07-11 03:56:56来源:博客园 阅读 ()

新老客户大回馈,云服务器低至5折

  刚入门vue ,打算用vue的脚手架做一个小项目。需要用到第三方的api,无奈遇到各种各样的问题。

  比如 Access-Control-Allow-Origin ,或者使用了ajax的jsonp模式之后也会出现个别api不兼容这个模式而出现另一个错误。还有的需要修改后端php之类的,头大。

  后来又听说了proxyTable,需要修改config/Index.js里面的内容。 无奈创建的项目没有该文件(怪我官网的内容没看仔细,也没有好好看控制台vue的帮助指令)。今天无意中看到可以用vue init [project-name]的方式创建项目这样子就会有index.js文件了。

至此就可以使用该文件的proxyTable方法了。

第一步:设置mian.js 中axios的引入方式

import axios from 'axios'
Vue.prototype.$ajax = axios

  网上的说法是$ajax相当于axios的别名,按我的理解命名成别得应该也可以吧。

第二步:以知乎的获取不知道是热门还是最新内容的api为例(网上例子里拿来的)

【https://news-at.zhihu.com/api/4/news/latest】首先在index.js文件内的正确位置添加

dev: {
//别的有了的内容可以不用管它,设置proxyTable就好了 
  proxyTable: {
    '/news/latest': {
      target: ' https://news-at.zhihu.com/api/4/',//接口域名+如果有端口 + 后续
      changeOrigin: true,//是否跨域
      // pathRewrite: {
      //   '^/news/latest': '/news/latest'//需要rewrite重写
      // } //这个什么ppathRewrite没有搞明白.反正没设置这个能用我也没有管它了- -
    }
  },

修改config.js文件夹后, 通常需要重启一下这个服务才能生效(或许不是通常是必须)

第三步:最后就可以在你的vue文件下使用该api了

this.$ajax({
  url: '/news/latest'', //这里就是上面target上面那个内容
  //params: { type: 'hot'},
  //这个params就是get参数的data,不过在这里不需要.给自己提个醒
  method: 'get',
  withCredentials: true
}).then(data=> {
  console.log(data);
}).catch(error => {
  console.log(error);
})

最后运行打开网站如果在Console里可以看到data就说明成功了。yeah 余汪汪万岁

做个笔记省的下次自己忘记了又要上网找的焦头烂额的,内容估计说的乱七八糟的。

不知道这样子做有没有什么安全隐患,我觉得应该会是有的吧

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:树叶飘落、雪花飘落等同时多个图片飘落

下一篇:小程序实践(四):动态控制组件的显示/隐藏