浏览器跨越问题处理

浏览器向服务器发送请求是跨越的，但不是所有的请求都会报错，跨越报错只出现在ajax请求类型，浏览器的请求遵循同源策略，即发送请求的页面地址与目标页面地址的协议名、主机名、端口号三者完全一致，如果三者任何一项不相同，浏览器会认为你是向其他服务器发送请求，为了保护你的安全，浏览器会拒绝接收其他服务器的数据，需要注意的是跨越错误本质问题出在浏览器，而不是服务器端，服务器是可以顺利接收到请求的。

解决跨域问题：

CORS技术：让后端在响应中添加必要的响应头，让响应回来之后浏览器不报错，是最简便的方法。

代理转发：前端配置一个代理服务器，让代理服务器帮浏览器转发请求，服务器之前发送请求是不会有跨域问题的。

代理服务器的业务流程：

1. 浏览器给代理服务器发请求
2. 代理服务器帮浏览器转发请求给目标服务器
3. 目标服务器把数据响应给代理服务器
4. 代理服务器把数据响应给浏览器

下面提供通过配置vue-cli请求代理解决开发环境下的跨域问题的方案：

 

vue-cli脚手架启动时会开启一个前端项目的服务器，vue-cli脚手架支持配置一个代理服务器，通过代理服务器转发浏览器的请求到目标服务器，代理服务和前端服务之间协议名、域名、端口号三者是统一的，不存在跨越问题，可以直接发送请求，代理服务和后端服务之间因为并不经过浏览器，所以没有同源策略的限制，可以直接发送请求。

vue-cli解决跨越配置说明：

在vue.config.js中有一项devServer

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

这里的代理服务协议名、域名、端口号与项目服务是完全一致，代理服务的‘/api’可以为请求基地址，表示以/api开头的请求地址由代理服务器转发请求到目标服务器。

注意：修改了配置文件，一定要重启前端项目，vue-cli集成的跨越代理功能，只能在开发阶段使用，包之后得到的就是普通的js，html文件，不再享受webpack server的服务。