跨域问题

内容主要来源于：ajax跨域完全讲解
本文主要讲解跨域的产生问题及解决思路，并不直接给出某个具体问题的解决方案

1. 跨域的产生

跨域是浏览器的限制
凡是发送请求url的协议，域名，端口三者之间任意一个与当前页面地址不同即是跨域

同源策略：
指的是浏览器对不同源的脚本或者文本的访问方式进行的限制。比如源a的js不能读取或设置引入的源b的元素属性。那么先定义下什么是同源，所谓同源，就是指两个页面具有相同的协议，主机（也常说域名），端口，三个要素缺一不可。
受同源策略限制的内容
js中的XMLHttpRequest等请求
不受同源策略限制的内容
页面中的链接：跨域资源嵌入，如<script src="..."></script>，<img>，<link>，<iframe>等，但浏览器限制了js不能读写加载的内容，

2. html解决跨域

iframe：

这个功能主要包括接受信息的"message"事件和发送消息的"postMessage"方法。比如baidu.com域的A页面通过iframe嵌入了一个google.com域的B页面，可以通过以下方法实现A和B的通信

A页面通过postMessage方法发送消息：

window.onload = function() {  
    var ifr = document.getElementById('ifr');  
    var targetOrigin = "http://www.google.com";  
    ifr.contentWindow.postMessage('hello world!', targetOrigin);  
};

B页面通过message事件监听并接受消息:

var onmessage = function (event) {  
  var data = event.data;//消息  
  var origin = event.origin;//消息来源地址  
  var source = event.source;//源Window对象  
  if(origin=="http://www.baidu.com"){  
  console.log(data);//hello world!  
  }  
};  
if (typeof window.addEventListener != 'undefined') {  
  window.addEventListener('message', onmessage, false);  
} else if (typeof window.attachEvent != 'undefined') {  
  //for ie  
  window.attachEvent('onmessage', onmessage);  
}

3. 跨域解决思路

3.1 浏览器禁止检查

在控制台输入下面内容，即可允许跨域

chrome --disable-web-security --user-data-dir=g:\temp3

缺点：浏览器禁止检查是客户端的行为，但是不可能在每个人的电脑上都通过这个方法去解决

3.2 jsonp（json pending）

jsonp是动态创建script标签，使用完后就立即销毁，所以无法通过查看dom元素页面代码的形式查看jsonp是否生成script脚本。
使用jsonp时，后台需要返回javascript脚本(后台需要改动)，它是一个函数，参数是使用的返回值。
实际项目中JSONP通常用来获取json格式数据，这时前后端通常约定一个参数callback，该参数的值，就是处理返回数据的函数名称。

// 前端请求
    $.ajax({
      method: 'get',
      url: config + '/admin/login/getLoginState',
      dataType: 'jsonp',
      success: (res) => {
        if (res.username) {
          this.setState({
            userName: res.username,
            isLogin: true
          });
        }
      }
    });

// 后台代码
  async getLoginStateAction() {
    var role = await this.session('role');
    var username = await this.session('username');
    var result = {
      role: role,
      username: username
    };
    this.jsonp(result);
  }

缺点：

服务器需要改动代码支持
只支持get
发出的不是xhr请求

3.3 跨域：

解决跨域的思路

3.3.1 被调用方➨ 支持代理

基于http在支持跨域上的一些规定，在响应头上添加指定字段，告诉浏览器，它允许被调用方调用。

实现方法：

服务器端实现
向服务器端添加以下请求头

Access-Control-Allow-Origin: *  // 允许所有的域名访问，可以根据请求的头来变化
Access-Control-Allow-Methods: *    // 允许所有的方法访问，可以根据请求的头来变化

▷▷ 跨域请求是先执行请求，还是先判断是跨域的请求？
请求有简单请求和非简单请求之分，如果是简单请求，浏览器会先请求后判断是否跨域，如果是非简单请求，浏览器会发送域解命令通过之后在请求。

▷▷ 注：

简单请求：
GET、HEAD、POST
请求头中，无自定义头
Content-Type为以下几种：text/plain、multipart/form-data、application/x-www-form-urlaencoded

非简单请求：
PUT、delete方法的Ajax请求
发送json格式的Ajax请求
带自定义头的Ajax请求

▷▷ Access-Control-Allow-Origin: * // 允许所有的域名访问，可以根据请求的头来变化是否满足所有请求呢？
使用带cookie的请求时，会出现以下问题：

这是因为在使用带cookie的请求时，必须将Access-Control-Allow-Origin设置为对应的域名，而不是允许所有的域名

将指定为对应的域名后，会出现：

将Access-Control-Allow-Credentials设置为true，让服务器允许cookie即可

但是这样请求会让服务端局限与一个域名调用
解决思路：
将客户端的请求origin获取到，把它设置为Access-Control-Allow-Origin就可以允许所有的域名调用
将客户端的请求header获取到，把它设置为Access-Control-Allow-Headers就可以允许所有的自定义请求头

nginx配置
apache配置

3.3.2 调用方➨ 隐藏代理

跨域请求不是从浏览器直接发送到被调用方，而是从中间的服务器转发的
反向代理：
nginx配置

apache配置