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'
        }
      }
    }

2 因为在新版的vue-cli的package.json中webpack-dev-server没有设置–open,所以打开package.json文件在”scripts”属性中的”dev”属性中手动添加–open，如下代码所示

"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)
        })

来源：https://blog.csdn.net/Lemontree_fu/article/details/100535140

标签

vue

vue-resource