先上报错 以表尊重

在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. 解决logback不打印mybatis的SQL日志的问题

    工作这么多年,今天还是因为Logback的这个问题稍微卡了一下,惭愧. 问题描述: logback配置了如下信息: <appender name="sql" class=&q ...

  2. 搭建 webpack + react 框架爬坑之路

    由于工程实践需要搭一个 webpack + react 框架,本人刚开始学,就照b站上的react黑马视频做,爬过无数个坑...希望读者能引以为戒.我的是macos系统 https://www.bil ...

  3. Java基础(五)继承和多态

    1.多态 先来看一个例子,其中Employee类是父类,Manager类继承了Employee类: public static void main(String[] args) { // constr ...

  4. JS设置和获取盒模型的宽和高

    JS设置和获取盒模型的宽和高 dom.style.width/height:只能取出内联样式的宽度和高度 dom.currentStyle.width/height:获取即时的计算的样式,但是只有IE ...

  5. 设计模式C++描述----21.解释器(Iterpreter)模式

    一. 解释器模式 定义:给定一个语言,定义它的文法的一种表示,并定一个解释器,这个解释器使用该表示来解释语言中的句子. 结构如下: 代码如下: //包含解释器之外的一些全局信息 class Conte ...

  6. 一文让你彻底了解大数据实时计算引擎 Flink

    前言 在上一篇文章 你公司到底需不需要引入实时计算引擎? 中我讲解了日常中常见的实时需求,然后分析了这些需求的实现方式,接着对比了实时计算和离线计算.随着这些年大数据的飞速发展,也出现了不少计算的框架 ...

  7. 【MySQL】MySQL Workbench快捷键小结

    执行当前行,ctrl+enter 执行整篇sql脚本: ctrl+shift+enter 格式化sql语句(美化sql语句):ctrl+b 自动补全:ctrl+space(似乎win10中这个快捷键失 ...

  8. Flask:对项目文件进行拆分

    在工作中,我们不可能将ORM的配置,ORM的操作,ORM的使用以及视图放到同一个文件里,大多数时候Flask都是按照MVC的设计理念进行部署的 1.MVC和MTV (1)MVC(Model-View- ...

  9. 配置Spring Boot 跨域后PUT,DELETE方法出现403Forbidden

    配置类 @Configuration public class CorsConfiguration { @Bean public WebMvcConfigurer corsConfigurer() { ...

  10. 面经-科大讯飞AI研究院

    面试时间:2019.06.27 电话面试 面试岗位:计算机视觉算法工程师/一面 面试时长:45分钟 面试内容: 自我介绍 简历中选择一个项目介绍-视频召回 问及项目中的语音.人脸.标题.模态缺失相关细 ...