前端跨域的解决方案？

前端跨域

跨域指的是一个域下的文档或脚本试图去请求另一个域下的资源。我们常说的跨域，也就是指由浏览器同源策略限制的一类请求场景。

同源指的是协议，域名和端口号相同，一旦有一个不相同，则为不同源。同源策略其实是一个安全策略，是为了保证用户信息安全，防止恶意的网站窃取数据，如CSRF(跨站请求伪造)攻击。

跨域解决方案

• CORS：（Cross-origin resource sharing）跨域资源共享

  实现：

  客户端无需处理，浏览器会自动在请求头中增加一些字段。如果是需要发送跨域Cookie，请求头要设置withCredentials属性

  服务端响应头需要加Access-Control-Allow-Origin、Access-Control-Allow-Headers、Access-Control-Allow-Credentials属性

  CORS分为两类：简单请求和非简单请求

  如果请求方法是HEAD,GET,POST其中一种，http头只有Accept，Accept-Language，Content-Language，Last-Event-ID，Content-Type这几个字段的话，则为简单请求，不满足的均为非简单请求。

  这两类的跨域流程也不同。

  简单请求的话，在头信息之中，服务器端根据Origin判断源是否在许可范围，再决定是否同意这次请求

  非简单请求的话，

  客户端会增加一次 HTTP 查询（“预检”）请求，即options请求，浏览器先询问服务器，只有得到肯定答复，浏览器才会发出正式的请求。

  服务器收到预检请求后，检查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后，确认允许跨源请求，就可以做出回应。

• 代理接口跨域

  在本地调试开发还可以利用webpack + webpack-dev-server代理接口跨域。

  需要使用本地开发插件：webpack-dev-server

  在config.js配置如下：

  module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://xxx.com/',
                pathRewrite: {'^/api' : ''}, 
                changeOrigin: true, // target是域名的话，需要这个参数，
                secure: false, // 设置支持https协议的代理
            }
        }
    }
  } 
  

以上是前端目前较为常用的跨域解决方案，以前也有一些比较常用的跨域解决方案，大概了解一下：

• websocket
• JSONP(只支持get请求)
• window.postMessage
• document.domain
• window.name+iframe
• location.hash+iframe