跨域

跨域

什么是跨域

跨域主要由于不符合浏览器的同源策略所产生的一种现象，同源策略属于浏览器的一种安全策略，其要求是所请求资源的协议、域名、端口号与当前页面完全一致，目的是为了保护本地数据不被请求获取的数据污染，如果缺少了同源策略，浏览器很容易受到XSS、CSRF等攻击，因此同源策略拦截的是请求返回来的数据，即服务器响应了，但是响应的结果被浏览器拦截了。

浏览器采用同源策略，在没有明确授权的情况下，禁止页面加载或执行与自身不同源的任何脚本。

同源策略限制的内容

• cookie、localStorage、indexDB等存储性内容。cookie只和域名以及路径关联，localStorage则是以源为单位进行管理，相互独立
• 禁止对不同源页面DOM进行操作，主要场景是iframe跨域
• ajax请求前后端分离的情况

允许跨域加载资源的标签

• img-src
• link-href
• script-src
• iframe-src

常见的解决跨域的方法

• JSONP(JSON with Padding)

  只支持get请求，利用了script标签可获取跨域资源的特点，可跨域的标签还有img、link、iframe、script等。

  具体操作：服务端的响应内容是js代码，返回的是函数调用，并把参数传递进去。浏览器对此代码进行解析并执行，对应的函数声明由前端自己定义。

• CORS(Cross-Origin Resource Sharing)

  跨域资源共享是一种基于 HTTP 头的机制，该机制通过允许服务器标示除了它自己以外的其它源（域、协议和端口），使得浏览器允许这些 origin 访问加载自己的资源。

  此机制新增了一组HTTP首部字段（header）来解决跨域问题，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。

  这个方法主要需要后端接口做处理，使响应报文包含正确的CORS响应头，如：

  response.setHeader('Access-Control-Allow-Origin', '*'); // 允许的请求来源
  response.setHeader('Access-Control-Allow-Headers', '*'); // 允许携带的头信息，用于预检请求的响应
  response.setHeader('Access-Control-Allow-Methods', '*'); // 允许的请求类型，用于预检请求的响应
  response.setHeader('Access-Control-Expose-Headers', 'token'); // 允许浏览器可以拿到的自定义响应头

• 代理跨域

  前端本地开发通常会使用这种解决跨域的方法。

  比如使用Webpack作为构建工具时，可以对devServer.proxy进行代理配置，使满足特定规则的请求，被转发到真实的接口地址，相当于给真实的接口做了一层代理。

  module.exports = {
    // ...
    devServer: {
      proxy: {
        '/api': {
          target: 'http://www.example.com',
          pathRewrite: {
            '^/api': ''
          }
        }
      }
    }
  };

  假设此时在A页面http://locahost:8080/index.html发起了一个请求http://localhost:8080/api/getList，请求实际会被转发至http://www.example.com/getList