刚入门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到内容的更多相关文章

  1. 本地Vue项目跨域请求本地Node.js服务器的配置方法

    前言:跨域请求是在本地开发时经常遇到的需求,也很简单,只是几句代码配置一下的问题.我初次配置跨域请求时由于官方的说明太简洁,找到的教程又落伍,调试了一番并没有解决问题,到最后解决问题,已花费了很多时间 ...

  2. vue 解决跨域问题

    1.后端处理允许跨域 2.反向代理跨域 代理服务器英文全称是Proxy Server,其功能就是代理网络用户去去的网络信息.形象的说:它是网络信息的中转站. vue中设置代理: 1.config/in ...

  3. vue解决跨域问题

    vue解决跨域问题 vue跨域解决方法和小总结 vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'Access-Control-Allow ...

  4. vue实现跨域请求的设置

    vue实现跨域请求,需要在vue.config.js里添加以下设置 proxy: { '/service/rest': { target: 'http://localhost:8080/autotab ...

  5. vue resource 携带cookie请求 vue cookie 跨域

    vue resource 携带cookie请求 vue cookie 跨域 1.依赖VueResource 确保已安装vue-resource到项目中,找到当前项目,命令行输入: npm instal ...

  6. VUE SpringCloud 跨域资源共享 CORS 详解

    VUE  SpringCloud 跨域资源共享 CORS 详解 作者:  张艳涛 日期: 2020年7月28日 本篇文章主要参考:阮一峰的网络日志 » 首页 » 档案 --跨域资源共享 CORS 详解 ...

  7. Vue的跨域设置

    1.在使用vue开发的时候经常要涉及到跨域的问题,其实在vue cli中是有我们设置跨域请求的文件的. 2.当跨域无法请求的时候我们可以修改工程下config文件夹下的index.js中的dev:{} ...

  8. vue + vue-resource 跨域访问

    使用vue + vue-resource进行数据提交,后台使用RESTful API的方式存取数据,搞了一天,终于把后台搞好了.进行联合调试时,数据不能提交,报403错误: XMLHttpReques ...

  9. 如何实现vue前端跨域,proxyTable解决开发环境前端跨域问题

    在开发环境与后端调试的时候难免会遇到跨域问题,很多人说跨域交给后端解决就好了. 其实不然,前端也有很多方法可以解决跨域,方便也快捷. 常见的有nginx转发.node代理. 在vue项目中常用的是pr ...

  10. vue axios跨域

    现在应用都是前后端分离,这也造成前端在调用接口时出现跨域问题,在控制台会这样提示 ,如果有类似于此图的提示,就已经表明你的接口调用出现了跨域问题,此文章是我对于vue跨域其中一种方式的一些经验,如果错 ...

随机推荐

  1. spring+springmvc+hibernate整合遇到的问题

    spring+springmvc+hibernate整合遇到的问题2016年10月20日 23:24:03 守望dfdfdf 阅读数:702 标签: ssh学习经历的异常exception异常框架更多 ...

  2. Hibernate中的一对一注解配置

    Card类 package cn.OneToOne2017109.entity; import javax.persistence.*; /** * Created by YSS on 2017/10 ...

  3. scss-@import

    css有一个特别不常用的特性,即@import规则,它允许在一个css文件中导入其他css文件.然而,后果是只有执行到@import时,浏览器才会去下载其他css文件,这导致页面加载起来 特别慢. s ...

  4. 封装微信jssdk自定义分享代码

    var protocol = window.location.protocol; //获取协议 var host = window.location.host; //获取域名 var posuDoma ...

  5. ES6新增的math,Number方法

    ES6新增的math,Number方法,下面总结了一些我觉得有用的 Nunber.isInteger()判断是否为整数,需要注意的是1,和1.0都会被认为是整数 console.log(Number. ...

  6. 用nodejs做一个svn密码修改页面

    linux上配置好svn服务后,管理修改密码还得去手工修改passwd这个文件,略麻烦,其实网上应该有配套的web管理修改界面程序.但我想自己用nodejs写一个,因为用node不用配置复杂的服务器. ...

  7. IntelliJ IDEA搭建SpringBoot的小Demo

    首先简单介绍下Spring Boot,来自度娘百科:Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进 ...

  8. 什么是PDM?

    PDM的含义 PDM的中文名称为产品数据管理(Product Data Management). PDM是一门用来管理所有与产品相关信息(包括零件信息.配置.文档.CAD文件.结构.权限信息等)和所有 ...

  9. 【NLP_Stanford课堂】句子切分

    依照什么切分句子——标点符号 无歧义的:!?等 存在歧义的:. 英文中的.不止表示句号,也可能出现在句子中间,比如缩写Dr. 或者数字里的小数点4.3 解决方法:建立一个二元分类器: 检查“.” 判断 ...

  10. django视图函数解析(三)

    1 视图views概述 1 作用: 视图接受web请求并响应web请求 2 本质: 视图就是python中的处理函数 3 响应: 一般是一个网页的HTML内容.一个重定向.错误信息页面.json格式的 ...