关于Vue-cli 跨域，即使是非自己的服务器也可以get到内容

标签：最新   指令   pat   port   init   说明   帮助   OLE   path   

　　刚入门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 余汪汪万岁

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

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

关于Vue-cli 跨域，即使是非自己的服务器也可以get到内容

标签：最新   指令   pat   port   init   说明   帮助   OLE   path   

原文地址：https://www.cnblogs.com/Ifover/p/9291091.html