vue解决跨域问题 | 易学教程

这两天有朋友用vue写页面遇到了跨域问题（其实是后台的问题），但是在局域网下也得把数据调过来，我在这里简单总结两种方法吧，希望对大家有帮助。
跨域问题的报错是下面这样的：

第一种办法：用vue-resource

输入指令

npm install vue-resource --save

然后在main.js文件引入

import VueResource from 'vue-resource' Vue.use(VueResource)

接下来在需要的vue单文件组件里调接口就可以了，会用到jsonp格式，写以下的代码

this.$http.jsonp('https://192.168.0.188：8081/api/Values', {},{headers: {},emulateJSON: true })       .then((res) => {          console.log(res);       })       .catch(function(err){          console.log(err)       })

这种办法，可以在控制台打开network，看看调用返回的内容，状态码是200就说明调用成功

第二种方法：用第三方接口proxyTable

1 在config目录下index.js文件中设置proxyTable

proxyTable: {       '/v1': {         target: 'https://api.douban.com',         changeOrigin: true,   //设置允许跨域         pathRewrite: {           // /v1将代表target/v1            '^/v1': '/v1'         }       }     }

"scripts": {     "dev": "webpack-dev-server --open --inline --progress --config build/webpack.dev.conf.js",     "start": "npm run dev",     "build": "node build/build.js"   },

3 在需要的vue的单文件组件里调用就行

      axios         .get(           "/v1/getServiceInfo?xxxxxx"         )         .then(res => {           console.log(res.data)         })

来源：51CTO

作者：何以为安、

链接：https://blog.csdn.net/Lemontree_fu/article/details/100535140

标签

vue

vue-resource