VUE-CLI搭建的项目中，vue.config.js中配置解决跨域问题。

1.为什么会出现跨域问题？

出于浏览器的同源策略限制。同源策略（Sameoriginpolicy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少同源策略，则浏览器的正常功能可能都会受到影响，可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）

2.什么是跨域？

当一个请求URL的协议、域名、端口三者之间任何一个与当前页面URL不同即为跨域。

3.VUE项目中如何解决跨域

前提：vue-cli搭建的项目，vue.config.js中配置

module.exports = {
  devServer: {
    proxy: {
        '/api': {		// /api 表示拦截以/api开头的请求路径
        target: 'url',	// 跨域的域名(不需要写路径)
        // ws: true,	// 是否代理websocked
        changeOrigin: true,	// 是否开启跨域
        pathRewrite:{		// 重写路径
          '^/api':''		// 把/api变成空字符
        }
      },
      '/foo': {
         target: 'url'	// 可以设置多个代理
      }
    }
  }
}

4.跨域表现以及解决原理

请求一个接口时，

出现 Access-Contril-Allow-Origin 等

就说明出现跨域了

原理：

1. 将域名发送给本地的服务器localhost：8080
2. 再由本地的服务器去请求真正的服务器
3. 因为请求是从服务端发出的，所以就不存在跨域的问题