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. ...
随机推荐
- 使用face-api.js实现人脸识别(一)
功能 第一阶段实现对图片中人脸的识别并打上标签(比如:人名) 第二阶段使用摄像头实现对人物的识别,比如典型的应用做一个人脸考勤的系统 资源 face-api.js https://github.com ...
- SpringBoot 遇到 No identifier specified for entity
No identifier specified for entity 从字面上不难看出来是没有设置主键 因为没有为标注为@Entity的实体类注明主键 import lombok.Data; impo ...
- CCBPM工作流系统中如何在特定的一个步骤,调用起另外一条流程
关键词: 工作流快速开发平台 工作流设计 业务流程管理 asp.net 开源工作流bpm工作流系统 java工作流主流框架 自定义工作流引擎 需求描述: 1, 操作员在操作最后一个节点时, ...
- JAVA netty 简单使用
实现一个功能,客户端和服务器 轮流对一个数加+1 服务器 public class Server { public static void main(String[] args) { NioEvent ...
- vue-music 跨域获取QQ音乐歌曲播放源
这个问题困扰了我很久,一直获取不到正确的播放源,qq对这块限制更加严格了 按照之前老师在视频中的写法,已经不能获取到播放源了 下面来分析一下正确的播放源url:http://dl.stream.qqm ...
- mysql获取刚插入(添加)记录的自动编号id
我们在写数据库程序的时候,经常会需要获取某个表中的最大序号数, 一般情况下获取刚插入的数据的id,使用select max(id) from table 是可以的.但在多线程情况下,就不行了. 下面介 ...
- MySQL计划任务(事件调度器)
原文:http://www.cnblogs.com/c840136/articles/2388512.html 备忘; MySQL5.1.x版本中引入了一项新特性EVENT,顾名思义就是事件.定时任务 ...
- 爬取bing背景图片
因为工作环境的原因,没办法用梯子,也不喜欢用某度,只能用bing,发现背景图片蛮好看的,刚好最近在学习摄影,需要提高审美,就想着把bing背景图片都爬去下来做桌面背景.写的代码比较入门,只是做个记录, ...
- RTKLib的Manual解读
Key-word: integer ambiguity resolution :整周模糊度解算 navigation:导航 Kinematic:动态,RTK的K rover:漫游 validation ...
- [考试反思]1012csp-s模拟测试70:盘旋
这套题比较烂... 上来看到T2是原题,一想上一次考试遇到原题就不换,这次应该也是,于是直接开始码,码了一半然后换题了 T1打表找规律或者推式子都不难... T2水的一匹暴力剪枝即可,但是我并不知道数 ...