Access-Control-Allow-Origin浏览器跨域请求问题

当我在vue中调用本地后台的接口时，出现了以下的错误：

 

错误原因：

当使用ajax访问远程服务器时，请求失败，浏览器报如上错误。这是出于安全的考虑，默认禁止跨域访问导致的。跨域问题来源于浏览器的同源策略，浏览器为了提高网站的安全性，在发送ajax请求时，只有在当前页面地址与请求地址的协议+域名+端口号相同时才允许访问，否则会被拦截。记住，协议，域名，端口号，三者缺一不可。有一个不一样都算跨域。

解决方法：

如果你是使用vue-cli 创建的工程，在根目录下创建vue.config.js文件，然后添加如下代码。

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8011', // 设置你调用的接口域名和端口号 别忘了加http
        ws: true,
        changeOrigin: true, // 这里设置是否跨域
        pathRewrite: { // 路径重写
          '^/api': ''
        }
      }
    }
  }
}

在这里，我是使用的axios，所以在main.js中配置为：

import axios from 'axios'
axios.defaults.baseURL = '/api/'
Vue.prototype.$http = axios

言下之意，在调用接口时，因为设置了路径重写，所以要以/api开头。至此，问题解决。