内容主要来源于：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配置
网友评论