先上报错 以表尊重

在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. js小数加减乘除时精度不准确

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/qq_33237207/article/d ...

  2. 手把手实现微信网页授权和微信支付,附源代码(VUE and thinkPHP)

    wechat github 手把手实现微信网页授权和微信支付,附源代码(VUE and thinkPHP) 概述 公众号开发是痛苦的,痛苦在好多问题开发者文档是没有提到的,是需要你猜的. 在开发过程中 ...

  3. Yii 数据库重连告别General error: 2006 MySQL server has gone away

    General error: 2006 MySQL server has gone away 错误原因 制造错误 解决办法 最新办法 错误原因 Mysql has gone away MySQL 服务 ...

  4. HTTP 结构详解

    转至 :https://blog.csdn.net/u010256388/article/details/68491509?utm_source=copy   引用 学习Web开发不好好学习HTTP报 ...

  5. Java多线程编程(六)单例模式与多线程

    在使用多线程技术的单例模式时会出现一些意想不到的情况,这样的代码如果在生产环境中出现异常,有可能造成灾难性的后果. 一.立即加载/“饿汉模式” 立即加载就是使用类的时候已经将对象创建完毕,常见的实现方 ...

  6. Hadoop环境部署

    1.虚拟机克隆 在VM界面点击查看-自定义-库,然后在左边我的计算机下右键点击安装好的第一个系统,然后管理-克隆,选择克隆系统所在的文件路径即可. 2.三台主机名字修改 root用户下: (1)编辑n ...

  7. (乱入)FingerGesture

    偶然的机会遇到FingerGesture插件,此插件也有很多方便的功能,比如控制主相机查看模型以及缩放等功能,如Component-FingerGestures-Toolbox-Camera-Orbi ...

  8. Pythonyu语法入门01

    引子 ​ 基于上一篇所学,有了计算机硬件,再在硬件之上安装好操作系统,我们就有了一个应用程序的运行平台,我们接下来的任务就是学习如何使用某款编程语言来开发应用程序. ​ 本篇的主题是先带大家了解下编程 ...

  9. C#开发命令执行驱动程序 之 读入命令行参数

    /// <summary> /// 在cmd窗体内执行如下: /// OrderDriverApp.exe Order Driver App /// 返回: /// The args ar ...

  10. 面向云原生的混沌工程工具-ChaosBlade

    作者 | 肖长军(穹谷)阿里云智能事业群技术专家   导读:随着云原生系统的演进,如何保障系统的稳定性受到很大的挑战,混沌工程通过反脆弱思想,对系统注入故障,提前发现系统问题,提升系统的容错能力.Ch ...