先上报错 以表尊重

在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. linq一般用法

    最一般的用法 var rows = from c in dataTrue.AsEnumerable() from t in dataPre.AsEnumerable() ].ToString().St ...

  2. 雷子聊并发编程(001):基础知识之串行&并行&并发

    前言 编写正确的程序很难,而编写正确的并发程序则难上加难.与串行程序相比,在并发程序中存在更多容易出错的地方.那么,为什么还要编写并发程序?原因很简单,能充分发挥与利用多处理器系统的强大计算能力. 在 ...

  3. 用Python将处理数据得到的csv文件分类(按顺序)保存

    用Python中的os和numpy库对文件夹及处理数据后得到的文件进行分类保存: import numpy as np import os for m in range(699,0,-35): cur ...

  4. Java多线程编程(一)Java多线程技能

    一.进程和多线程的概念以及线程的优点 打开Windo任务管理器可以看到很多正在运行着的exe程序,完全可以将运行在内存中的exe文件理解成进程,进程是受操作系统管理的基本运行单元. 线程可以理解成在进 ...

  5. django-模板之comment标签(六)

    index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...

  6. (三)django--带Template的网站

    我们接着(二),在new下新建一个templates(注意必须是这个名字,不然要进行配置),然后在该目录下新建一个test.html 2.我们在pycharm中新建的html文件里面不会有内容,我们输 ...

  7. arango集群部署

    arango集群部署 ############arango集群操作################## arangodb3-3.3.16-1.x86_64.rpm(使用rpm包方式安装) arango ...

  8. Element-ui-安装

    1.node环境安装 1.1.根据自己电脑位数,下载最新版node.js并安装https://nodejs.org/en/ 1.2.下载git并安装https://gitforwindows.org/ ...

  9. HTTP 304状态码的详细讲解

    首先,对于304状态码不应该认为是一种错误,而是对客户端有缓存情况下服务端的一种响应. 客户端在请求一个文件的时候,发现自己缓存的文件有 Last Modified ,那么在请求中会包含 If Mod ...

  10. 中级前端必备知识点(2.5w+月薪)进阶 (分享知乎 : 平酱的填坑札记 关注专栏 用户:安大虎)

    前端已经不再是5年前刚开始火爆时候的那种html+css+js+jquery的趋势了,现在需要你完全了解前端开发的同时,还要具备将上线.持续化.闭环.自动化.语义化.封装......等概念熟练运用到工 ...