Vue + axios 小坑随笔(跨域部分)
来源:互联网 发布:十三陵灵异事件知乎 编辑:程序博客网 时间:2024/04/19 09:07
今天闲暇时刻撸项目的时候撸出了一个小坑,虽然很快解决了但是还是想着记录下来,防止以后再掉进去。(说不定明天就又跳进去了2333)
在进入正文之前先小小的偏一下题,聊一下axios —— 首先 axios并不支持 vue.use() 的声明方式使用,一般的声明使用方式应该如下:
main.jsimport axios from 'axios';Vue.prototyps.$axios=axios;
这样子的话在其他的 vue 组件中就可以通过 this.$axios
来调用使用了。
好了,说回正题。这里要说的坑呢就是跨域的问题了。这个问题是在我要调用 api 接口的时候出现的。一开始的时候忽略了这个方面,所以浏览器毫不留情的给了我如下的提示: No 'Access-Control-Allow-Origin' header is present on the requested resource.
看到这个错误提示我懵逼了一下,然后恍然大悟 —— 他喵的原来是我忘记设置跨域了…惭愧惭愧。然后花了一点时间配置了一下,然后重启运行,嗯,完美~
咳咳,其实设置跨域也并不复杂,只需要在 webpack 配置一下 proxyTable 就 ok 了。配置文件为 config/index.js,大致代码如下:
加入以下 proxyTable: { '/api': { target: 'http://api.zhuishushenqi.com/',//这个是我调用的api,设置你调用的接口域名和端口号,别忘了加http changeOrigin: true, pathRewrite: { '^/api': '/'//这里理解成用‘/api’代替target里面的地址,后面组件中我们掉接口时直接用api代替 比如我要调用'http://api.zhuishushenqi.com/user/add',直接写‘/api/user/add’即可 } } },
不过这里只是解决了开发环境中的跨域问题,生产环境中真正部署到服务器上如果是非同源的话还是会存在跨域问题的。但是目前因为还没有做到那一步,所以这个问题暂且不去理会。希望上面啰啰嗦嗦的一堆话能对需要帮助的人起到一定的帮助作用。
Done~
阅读全文
0 0
- Vue + axios 小坑随笔(跨域部分)
- vue axios跨域问题解决
- vue axios 跨域问题
- vue cli+axios踩坑记录+拦截器使用,代理跨域proxy(更新)
- vue cli+axios踩坑记录+拦截器使用,代理跨域proxy(更新)
- Vue的axios跨域问题
- vue开发:vue-cli+axios解决跨域问题
- 在Vue中如何使用axios跨域访问数据
- vue项目中,使用axios跨域处理
- vue axios node cors 跨域解决 session验证
- vue项目中axios跨域的问题
- vue.js使用axios实现跨域请求
- Vue用axios请求数据proxyTable解决跨域问题
- vue axios
- Vue axios
- vue开发:VUE axios发送跨域请求需要注意的问题
- vue+axios自己踩过的坑
- vue踩坑之全局使用axios
- PostgreSQL数据库Dig5
- 知识体系
- 使用snownlp进行情感分析
- 大话设计模式-Study-Tips-第五章-工厂方法模式
- mac 软件假死杀进程
- Vue + axios 小坑随笔(跨域部分)
- LeetCode 198. House Robber(Python)
- lua学习
- MVP 模式简单易懂的介绍方式
- 软件的三种版本
- C# 理解lock
- PowerDesigner16.5详细操作【生成数据字典】
- 面向对象基础知识(1)
- WinDbg调试:配置和查看符号