如何处理浏览器的跨域问题

第一种方式 CORS

首先你需要阅读CORS，
首先你需要阅读CORS，
首先你需要阅读CORS，重要的事情说3遍

当浏览器发送一个跨域的xhr时，需要注意的是，首先会发送一个Request Method: OPTIONS类型的请求，如下图

image.png
此时后台需要处理的是，发送一些header，通知浏览器协商的内容，可以进行跨域访问，已php为例，写法如下

header('Access-Control-Allow-Origin:*'); // 可以进行的跨域ip或域名，*代表所有
header('Access-Control-Allow-Methods:OPTIONS, GET, POST'); // 允许跨域的请求方式，options，get，post请求
header('Access-Control-Allow-Headers:X-Requested-With,key,token'); // 允许通过的自定义hearder字段，可以写多个

！！！特别需要注意的有2点！！！

1. OPTIONS的请求并不会携带任何额外的数据,它只是一次预处理，在此次请求中不能接收get,post,header等数据，所以你需要做的只是设置header，然后直接返回(不要再让程序走向具体的代码逻辑了，你接受不到其它数据的，你应该使用一个基类来统一处理跨域)http的200成功状态码，如果你的后端程序返回了500等其他状态码，会导致真正的请求(get或post)不会再进行下去.
2. 如果使用的是cookie和session模式，cookie一般是不会自动携带的，客户端需要设置 Access-Control-Allow-Credentials: true,但此时又会出现另外一个问题,后端此时的Access-Control-Allow-Origin:*不可以设置为*，这是不被允许的，因为不安全。但你可以使用一个技巧来回避这个问题，'Access-Control-Allow-Origin:动态获取到的客户端ip'

第二种方式，前端proxy代理，只适用于项目开发

当你使用了前端的vue，react,angular等框架时，可以直接使用他们的脚手架，脚手架提供一个配置好的webpack,可以在配置文件中的proxy添加代理地址，这样可以避免跨域问题，如果是自己搭建的框架自行配置webpack依然可以实现代理

第三种方式，后端代理，可以用于项目部署

后台的静态服务器（apache,nginx）一般都带有代理功能，可以自行配置，代理前端项目的xhr请求到真实的后台接口地址，这样可以避免跨域问题