先上报错 以表尊重

在vue中 找到 config文件夹中的 index.js文件 

配置更改如下

proxyTable: {
'/api': {
target: 'http://47.240.11.236:8080', //设置你调用的接口域名和端口号 别忘了加http
changeOrigin: true, //這裡true表示实现跨域
pathRewrite: {
'^/api': '/' //这里理解成用‘/api’代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用'http://47.240.11.236:8080/json.json',直接写‘/api/json.json’即可
}
},
},

组件中使用

export default {
data() {
return {};
},
mounted() {
this.$axios.get("/api/json.json").then(function(response) {
console.log(response);
}).catch(function(error) {
console.log(error);
});
}
};

如果你走到了这一步 掉进了坑里  那么得到的结果是    跨域的报错变成了404报错

记得你改的是配置文件~~~~~~~要重启~~~~~~~~~~我一定是最贴心的博主 在这个坑里呆了一个小时才上来    看到的同学们记得重启服务哦~

正确结果

或者还可以这样改

 proxyTable: {
'/': {
target: 'http://47.240.11.236:8080',
changeOrigin: true
},
} 调用:
this.$axios.get("json.json").then(function(response) {
console.log(response);
}).catch(function(error) {
console.log(error);
});

vue 解决跨域的更多相关文章

  1. vue解决跨域问题

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

  2. vue 解决跨域问题

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

  3. Vue解决跨域之反向代理

    目录 : config/index.js module.exports = { dev: { // Paths assetsSubDirectory: 'static', assetsPublicPa ...

  4. 【Vue】新版vue解决跨域问题

    vue.config.js module.exports = { devServer: { proxy: { "/api": { target: "http://192. ...

  5. Django_restframework+vue解决跨域问题

    1. 安装 pip3 install django-cors-headers 2.在settings.py里设置 INSTALLED_APPS = ( ... 'corsheaders', ... ) ...

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

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

  7. vue webpack配置解决跨域问题

    现在基本项目都是实行前后端分离的原则,不管是ng 或者是vue 在开发中都无法避免跨域的这个问题 本人刚上手第一个vue项目,在调用api的时候出现了跨域的这个问题 这是封装好一个简单的post 请求 ...

  8. Nginx+Springboot+Vue 前后端分离 解决跨域问题

    1:前端vue 写完 打包 npm run build prod 2: 后端api 写完打包 springboot mvn package -Dmaven.test.skip=true 3: ngin ...

  9. vue开发环境和生产环境里面解决跨域的几种方法

    什么是跨域   跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据.源指协议,端口,域名.只要这个3个中有一个不同就是跨域. 这里列举一个经典的列子: #协议跨域 http://a.baidu. ...

随机推荐

  1. Spring使用AspectJ开发AOP:基于Annotation

    基于 Annotation 的声明式 在 Spring 中,尽管使用 XML 配置文件可以实现 AOP 开发,但是如果所有的相关的配置都集中在配置文件中,势必会导致 XML 配置文件过于臃肿,从而给维 ...

  2. 你好,Go语言

    本文是「vangoleo的Go语言学习笔记」系列文章之一. 官网: http://www.vangoleo.com/go/hello-golang/ 我在2015年第一次接触Go语言,完成了Hello ...

  3. windows安装web服务器看这一篇就够了(Apache PHP MySQL)

    本文将为您描述Windows Server Install Apache PHP MySQL(图文详解),Windows搭建web服务器(php+Apache+mysql) 的方法 环境准备: Win ...

  4. 如何判断float值有效

    // 一个浮点数是否有效,首先要看其是否是一个数字(_isnan为0),其次还要看其是否超出了表示范围(_finite为0) // 注意_finite是有限的意思 #include <float ...

  5. 如何获取比 dism.log 更详细的日志

    正文 在工作中,曾经遇到过一个问题. 有一个 component,名字叫做 Oxford Adaptive Learning Dictionary,是一款牛津词典的应用.这个 component,需要 ...

  6. 第三十七章 POSIX线程(一)

    POSIX线程库相关介绍   与线程有关的函数构成了一个完整的系列,绝大多数函数的名字都有"pthread_"开头   要使用这些函数库,都需要加入头文件"<pth ...

  7. 在VMware下进行的CentOS7操作系统虚拟机的安装

    一.VMware虚拟机的安装 首先你需要拥有一款软件VMware,这是一款虚拟机安装软件.Vmware比起Vbox收费较贵,占用资源大,但是拥有大量的资源以及拥有克隆技术,适合新手学习使用,较为专业. ...

  8. vue H5页面手机端 利用canvas 签名

    签名首先用一个canvas标签,上面加三个代码,分别是点击,移动,离开.这里点击是开始画笔的地方,如果不加@touchstart 笔头会发生偏移,可以试试. @toucheend也是如此.尾巴也会出现 ...

  9. [考试反思]1030csp-s模拟测试94:未知

    排名也未知.第1或第5. 分数也未知,300或260. 人生真是大起大落... 啊啊啊啊啊我好感动啊竟然重测了一次----- 评测机怎么测怎么RE,本机怎么测怎么AC(任意编译指令,任意评测平台) 结 ...

  10. Spring Boot 2.x监控数据可视化(Actuator + Prometheus + Grafana手把手)

    TIPS 本文基于Spring Boot 2.1.4,理论支持Spring Boot 2.x所有版本 众所周知,Spring Boot有个子项目Spring Boot Actuator,它为应用提供了 ...