vue解决跨域

vue项目中，前端与后台进行数据请求或者提交的时候，如果后台没有设置跨域，前端本地调试代码的时候就会报“No ‘Access-Control-Allow-Origin’ header is present on the requested resource.” 这种跨域错误。
要想本地正常的调试，解决的办法有三个：

一、后台更改header

header('Access-Control-Allow-Origin:*');//允许所有来源访问 
header('Access-Control-Allow-Method:POST,GET');//允许访问的方式 　

这样就可以跨域请求数据了。

二、使用JQuery提供的jsonp (注：vue中引入jquery，自行百度)

methods: { 
  getData () { 
    var self = this 
    $.ajax({ 
      url: 'http://f.apiplus.cn/bj11x5.json', 
      type: 'GET', 
      dataType: 'JSONP', 
      success: function (res) { 
        self.data = res.data.slice(0, 3) 
        self.opencode = res.data[0].opencode.split(',') 
      } 
    }) 
  } 
}

通过这种方法也可以解决跨域的问题。
三、使用http-proxy-middleware 代理解决（项目使用vue-cli脚手架搭建）

例如请求的url:“http://app.clb528.cn/login/getcode”

1、打开config/index.js,在proxyTable中添写如下代码：

 //vue.config.js
module.exports = {
  publicPath: './',
  lintOnSave:false,
  devServer:{
    open: true, //浏览器自动打开页面
    //host，真机测试IP地址，也就是你自己电脑的IP，你手机要跟你电脑在同一个局域网内，
    //特别强调，注意开发调试时的console.log()，打印过多会撑爆微信浏览器缓存，就打不开页面了，坑死。
    host: "192.178.0.26",
    // host: "localhost",
    //真机测试端口
    port: 8089,
    https: false,
  },
  devServer: {
    proxy: {
      '/api': {
        target: 'http://app.clb528.cn/', //对应自己的接口
        changeOrigin: true,
        ws: true,
        pathRewrite: {
          '^/api': 'http://app.clb528.cn/'
        }
      }
    }
  }
}

通过vue-cli3.x版本构建的项目则在根目录创建vue.config.js文件，一样的写法，这个配置文件在运行项目的时候自动加载。
最后在页面发送请求的时候：

getData () { 
 axios.get('/api/login/getcode', function (res) { 
   console.log(res) 
 })

通过这中方法去解决跨域，打包部署时还按这种方法会出问题。解决方法如下：

let serverUrl = '/api/'  //本地调试时 
// let serverUrl = 'http://f.apiplus.cn/'  //打包部署上线时 
export default { 
  dataUrl: serverUrl + 'login/getcode' 
}

vue.config.js 是一个可选的配置文件，更多配置介绍https://cli.vuejs.org/zh/config/#%E5%85%A8%E5%B1%80-cli-%E9%85%8D%E7%BD%AE
这个文件应该导出一个包含了选项的对象：

// vue.config.js
module.exports = {
  // 选项...
}