内容主要来源于: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配置