一、是什么

问题描述：

在本地开发过程中，调用后端程序员提供的接口获取数据，希望将获取的数据渲染到页面中，但是浏览器报错：

// 控制台报错信息
Access to XMLHttpRequest at 'http://x.x.x.x/data/getdata' 
from origin 'http://localhost:8080' has been blocked by 
CORS policy: The 'Access-Control-Allow-Origin' header 
has a value 'http://x.x.x.x:8080' 
that is not equal to the supplied origin.

查看Network中的内容时发现XHR中该请求的状态Status为200，但是页面中数据不显示。

这种情况是由浏览器的同源策略导致的跨域问题。

二、为什么

跨域问题的出现是因为浏览器存在同源策略问题，所谓同源:即两个页面具有相同的协议（protocol：http、https），主机（host）和端口（port），它是浏览器最核心也是最基本的功能，如果没有同源策略，浏览器将会十分危险，随时都可能受到攻击。当我们请求一个接口获取数据的时候，出现如：“Access-Control-Allow-Origin” 等报错信息即说明该请求跨域。

三、怎么办

1.在vue项目根目录下找到vue.config.js文件（如果没有该文件可自己创建），在proxy中设置跨域。

更多vue.config.js相关配置可访问Vue CLI 查看配置参考

其中也有devServer和devServer.proxy配置的详细说明

//vue.config.js

module.exports = {
  devServer: {
    proxy: {
      //配置跨域
      '/api': {
        target: 'http://x.x.x.x:x/', //这里填写项目真实的后台接口地址
        changOrigin: true, //设置允许跨域
        pathRewrite: {//这个重写不可省略！因为我们真正请求的地址并不含 /api
          '^/api': ''
            /* 当我们在浏览器中看到请求的地址为：http://localhost:8080/api/data/getdata 时
            因为重写了 /api ，所以实际上访问的地址是：http://x.x.x.x:x/data/getdata，
            */
        }
      }
    }
  }
}

在vue项目中配置proxy解决跨域问题的原理是：将域名发送给本地的服务器（启动vue项目的服务，localhost:8080），再由本地的服务器去请求真正的服务器。

2.在vue项目src目录下找到main.js文件，在创建axios实例的时候将baseURL设置为 /api ，这时候我们的跨域问题便已解决。

//main.js

import axios from 'axios'
Vue.prototype.$axios = axios
//配置请求的根路径
axios.defaults.baseURL = '/api'

3.重新启动项目即可获取到数据并在页面中显示了，此时我们在浏览器查看Network中的请求信息会看到Request URL是：http://localhost:8080/api/data/getdata，多了个 /api，但并不影响我们请求数据。