vue.js+axios以及跨域

没做过web开发的,还是用一天时间学习一下vue.js,以便以后配合golang写些简单的web程序。

学习vue.js

vue.js的入门就不写笔记了实在是懒得写,网上一堆文章直接搜索出来看看就好,同时可以配合element-ui做些测试。
本来看见web前端开发就挺烦的,一大堆乱七八糟的东西,传说中简单的vue也动不动就一堆什么全家桶,动手是最好的学习方法,稍微学习感觉vue确实挺简单方便,当然真正使用时应该还是挺多坑。

参考文章:
搭建vscode+vue环境
这可能是vue-cli最全的解析了......
Vue2全家桶之一:vue-cli(vue脚手架)超详细教程
基于vue-cli快速构建
以及:
Vue官网文档
Vue CLI 官网文档
Element UI官网文档

附神图一张(点击后查看原图):

安装和使用axios

$ cnpm install axios

main.js文件:
import axios from 'axios'
Vue.prototype.$axios = axios

这样就可以使用this.$axios来调用axios,使用例子参考下面跨域。

跨域

1. 本地服务器开发环境,添加proxyTable代理:

修改config/index.js文件:
dev: {
 // Paths
 assetsSubDirectory: 'static',
 assetsPublicPath: '/',
 proxyTable: { //修改这里
 '/bd': {
 target: 'https://www.baidu.com',
 secure: true, //https必须添加这个设置
 changeOrigin: true,
 pathRewrite: {
 '^/bd': ''
 }
 }
 },

做了以上修改以后需要重启服务器:npm run dev

调用
调用时可以直接使用'/bd',会被自动替换为上面定义的target地址,调用例子:

App.vue文件:
methods: {
 getBd (event) {
 this.$axios.get('/bd')
 .then(function (response) {
 console.log(response)
 })
 .catch(function (error) {
 console.log(error)
 })
 }
 }

2. 生产环境

因为在开发环境我们一般直接使用npm run dev启动内置的服务器,而以上修改proxyTable的方法应该就是修改这个本地服务器的配置让其访问该代理地址时自动加上跨域功能。

而生产环境则不然,服务器一般是另外的比如使用nginx,此时修改nginx的跨域配置就可以了。或者golang gin写的服务器,那么就在代码中加上跨域支持。或者要访问第三方网站,那么直接使用后端编程语言比如go去跨域访问,其实说白了跨域跟客户端没什么关系都是服务器的事。

生产环境还没测试,等以后验证再补充修改。

有疑问加站长微信联系(非本文作者)

• 请尽量让自己的回复能够对别人有帮助
• 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`
• 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet
• 图片支持拖拽、截图粘贴等方式上传