怎么处理跨域问题

跨域是什么

跨域本质是浏览器基于同源策略的一种安全手段

同源策略（Sameoriginpolicy），是一种约定，它是浏览器最核心也最基本的安全功能

所谓同源（即指在同一个域）具有以下三个相同点

• 协议相同（protocol）
• 主机相同（host）
• 端口相同（port）

反之非同源请求，也就是协议、端口、主机其中一项不相同的时候，这时候就会产生跨域。

vue-cli中集成的跨域解决方案

 1、vue-cli脚手架工具在启动时，会开启一个前端项目的服务器。在同一局域网中的用户都可以通过ip地址来访问

2、vue-cli脚手架支持配置一个代理： 将指定的类型请求，转发到目标服务器

3、代理服务和前端服务之间由于协议域名端口三者统一不存在跨域问题，可以直接发送请求

4、代理服务和后端服务之间由于并不经过浏览器没有同源策略的限制，可以直接发送请求

这样，我们就可以通过服务器代理做接口转发，在开发环境下解决跨域问题，看起来好像挺复杂，其实vue-cli已经为我们内置了该技术，我们只需要按照要求配置一下即可。

vue-cli解决跨域配置说明

在 vue.config.js 配置文件中，有一项是devServer，它就是我们下边要操作的主角。

module.exports = {
  devServer: {
    // ... 省略
    // 代理配置
    proxy: {
        // 如果请求地址以/api打头,就出触发代理机制
        // http://localhost:9588/api/login -> http://线上的地址/api/login
        '/api': {
          target: 'http://线上的地址' // 我们要代理的真实接口地址
        }
      }
    }
  }
}

去掉axios基地址

({
  timeout: 5000
	// baseURL: ''
})

vue-cli集成了跨域代理功能------ 只能用在开发阶段。

vue.config.js文件中，在devServe下按指定格式配置了proxy，再重启项目即可。