vue 解决跨域
先上报错 以表尊重
在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 解决跨域的更多相关文章
- vue解决跨域问题
vue解决跨域问题 vue跨域解决方法和小总结 vue项目中,前端与后台进行数据请求或者提交的时候,如果后台没有设置跨域,前端本地调试代码的时候就会报“No 'Access-Control-Allow ...
- vue 解决跨域问题
1.后端处理允许跨域 2.反向代理跨域 代理服务器英文全称是Proxy Server,其功能就是代理网络用户去去的网络信息.形象的说:它是网络信息的中转站. vue中设置代理: 1.config/in ...
- Vue解决跨域之反向代理
目录 : config/index.js module.exports = { dev: { // Paths assetsSubDirectory: 'static', assetsPublicPa ...
- 【Vue】新版vue解决跨域问题
vue.config.js module.exports = { devServer: { proxy: { "/api": { target: "http://192. ...
- Django_restframework+vue解决跨域问题
1. 安装 pip3 install django-cors-headers 2.在settings.py里设置 INSTALLED_APPS = ( ... 'corsheaders', ... ) ...
- 如何实现vue前端跨域,proxyTable解决开发环境前端跨域问题
在开发环境与后端调试的时候难免会遇到跨域问题,很多人说跨域交给后端解决就好了. 其实不然,前端也有很多方法可以解决跨域,方便也快捷. 常见的有nginx转发.node代理. 在vue项目中常用的是pr ...
- vue webpack配置解决跨域问题
现在基本项目都是实行前后端分离的原则,不管是ng 或者是vue 在开发中都无法避免跨域的这个问题 本人刚上手第一个vue项目,在调用api的时候出现了跨域的这个问题 这是封装好一个简单的post 请求 ...
- Nginx+Springboot+Vue 前后端分离 解决跨域问题
1:前端vue 写完 打包 npm run build prod 2: 后端api 写完打包 springboot mvn package -Dmaven.test.skip=true 3: ngin ...
- vue开发环境和生产环境里面解决跨域的几种方法
什么是跨域 跨域指浏览器不允许当前页面的所在的源去请求另一个源的数据.源指协议,端口,域名.只要这个3个中有一个不同就是跨域. 这里列举一个经典的列子: #协议跨域 http://a.baidu. ...
随机推荐
- 疯狂Java:突破程序员基本功的16课-李刚编著 学习笔记(未完待续)
突破程序员基本功(16课) 数组 静态语言: 在编译的时候就能确定数据类型的语言,大多静态语言要求在使用变量之前必须声明数据类型(少数具有强推导能力的现代语言不用) 动态语言: 在程序运行时确定数据类 ...
- VS无法新建项目
问题描述:VS无法新建项目,确定Button呈灰色状态 原因:本机未安装Framework的环境,避免此类现象,在装VS之前,先安装好Framework,再安装VS. 解决方案: 1.点击图中< ...
- Unity 单例模式
明天十一放假,今天不知什么原因看到一篇unity单例模式的介绍,瞬间来了戾气. (一)最简单的单利 public class WebRequestUtility : MonoBehaviour { p ...
- fenby C语言 P15
while(条件表达式){循环体} #include <stdio.h> int main(){ int i=1,sum=0; while(i<6) { sum=sum+i*3; i ...
- Flask源码分析二:路由内部实现原理
前言 Flask是目前为止我最喜欢的一个Python Web框架了,为了更好的掌握其内部实现机制,这两天准备学习下Flask的源码,将由浅入深跟大家分享下,其中Flask版本为1.1.1. 上次了解了 ...
- Dubbo 优雅停机演进之路
一.前言 在 『ShutdownHook- Java 优雅停机解决方案』 一文中我们聊到了 Java 实现优雅停机原理.接下来我们就跟根据上面知识点,深入 Dubbo 内部,去了解一下 Dubbo 如 ...
- 路由器配置深入浅出—路由器接口PPP协议封装及PAP和CHAP验证配置
知识域: 是针对点对点专线连接的接口的二层封装协议配置 PPP的PAP和CHAP验证,cpt支持,不一定要在gns3上做实验. 路由器出厂默认是hdlc封装,修改为ppp封装后,可以采用pap验证或者 ...
- const var let 三者的区别
1.const定义的变量不可以修改,而且必须初始化. ;//正确 const b;//错误,必须初始化 console.log('函数外const定义b:' + b);//有输出值 b = ; con ...
- SpringBoot自定义starter及自动配置
SpringBoot的核心就是自动配置,而支持自动配置的是一个个starter项目.除了官方已有的starter,用户自己也可以根据规则自定义自己的starter项目. 自定义starter条件 自动 ...
- python中小整数对象池及intern机制
小整数对象池: Python为了优化速度,使用了小整数对象池,避免为整数频繁申请和销毁 Python 对小整数的定义是 [-5, 256] 这些整数对象是提前建立好的,不会被垃圾回收,所有位于这个范围 ...