跨域
跨域是指浏览器允许向服务器发送跨域请求，从而克服Ajax只能 同源使用的限制。
- 资源跳转： A链接、表单提交
<link>、<script>、<img>、<frame>等dom标签，还有样式中background:url()、@font-face()等文件外链- js发起的ajax请求，Fetch请求等
同源策略
同源策略是一种约定，由Netscape公司1995年引入浏览器，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议 + 域名 + 端口"三者相同，即便两个不同的域名指向同一个ip地址，也非同源。
常见的跨域场景
| URL | 说明 | 通信 |
|---|---|---|
| http://www.domain.com/a.js http://www.domain.com/b.js | 同一域名，不同文件或路径 | 允许 |
| http://www.domain.com/a.js https://www.domain.com/b.js | 同一域名，不同协议 | 不允许 |
| http://www.domain.com/a.js http://www.domain.com:8080/b.js | 同一域名，不同端口 | 不允许 |
| http://www.domain.com/a.js http://www.domain2.com/b.js | 不同域名，相同协议 | 不允许 |
| http://www.domain.com/a.js http://172.0.0.1/b.js | 域名和其对应的ip | 不允许 |
| http://a.domain.com/a.js http://b.domain.com/b.js | 不同子域名，相同主域名 | 不允许 |
跨域的解决方案
- JSONP跨域
jsonp的原理通过<script>标签src属性，发送带有callback参数的GET请求，服务端将接口返回数据拼凑到callback函数中，返回给浏览器，浏览器解析执行，从而前端拿到callback函数返回的数据。
// 回调函数
function handleEvent(data) {
console.info(data)
}
// 原生js
let script = document.createElement("script");
script.src = "https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=1432,21090,30211&wd=12&csor=2&pwd=1&cb=handleEvent&_=1576509650094";
document.body.insertBefore(script, document.body.firstChild)
// Jquery
$.ajax({
url: 'https://www.baidu.com/sugrec?pre=1&p=3&ie=utf-8&json=1&prod=pc&from=pc_web&sugsid=1432,21090,30211&wd=12&csor=2&pwd=1&cb=handleEvent&_=1576509650094',
type: 'get',
dataType: 'jsonp', // 请求方式为jsonp
jsonpCallback: "handleEvent", // 自定义回调函数名
data: {}
})
- 跨域资源共享（CORS）
跨域资源共享（ CORS）机制允许 Web 应用服务器进行跨域访问控制，从而使跨域数据传输得以安全进行。
简单请求
对于简单请求，浏览器会直接发出CORS请求，具体的就是在头信息中，增加一个Origin字段。
- 请求方法使用下列方法中的其中一个
- HEAD
- GET
- POST
- HTTP头信息不超过以下几个字段
- Accept
- Accept-Language
- Content-Language
- Last-Event-ID
- Content-Type（只限于
application/x-www-form-urlencoded|multipart/form-data|text/plain三个值）
# Reuqest Header
// 本次请求来自哪个源（协议 + 域名 + 端口）。服务器根据这个值，决定是否同意这次请求。
Origin: https://www.cnblogs.com
Host: constid.dingxiang-inc.com
Accept-Language: zh-CN,zh;q=0.9
User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/79.0.3945.79Safari/537.36
# Response Header
// 服务器端指定允许其他域名访问
Access-Control-Allow-Origin: https://www.cnblogs.com
// 是否允许后续请求携带认证信息（cookies）,该值只能是true，否则不返回
Access-Control-Allow-Credentials: true
非简单请求
非简单请求是那种对服务器有特殊要求的请求，譬如put delete方法，或者Content-Type字段类型是application/json的，非简单请求在正式通信前，会增加一次请求，称为预检请求，也就是options方法。
预检请求
浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。
OPTIONS /cors HTTP/1.1
Origin: http://api.bob.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: magic
Host: api.alice.com
与简单请求不同的是，option请求多了2个字段：
Access-Control-Request-Method：必须字段，用来列出浏览器的CORS请求会用到哪些HTTP方法。
Access-Control-Request-Headers：该字段是一个逗号分隔的字符串，指定浏览器CORS请求会额外发送的头信息字段。
预检请求的回应
服务器收到"预检"请求以后，检查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后，确认允许跨源请求，就可以做出回应。
Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Methods: GET, POST, PUT,Delete
Access-Control-Allow-Headers: magic
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 1728000
Access-Control-Allow-Origin
*：设置*是最简单粗暴的，但是服务器出于安全考虑，很少有人这么做，设置为*浏览器将不会发送cookies，即使你的XHR设置了withCredentials。（Cookie得有域名保存）- 指定域：后端指定一个固定的域。
- 请求域动态设置：后端维护一个固定的数组
[<域名1>， <域名2>...]，使用request origin头信息与数组做对比，来做请求域的设置。
Access-Control-Allow-Methods
表明服务器支持的所有跨域请求的方法。
Access-Control-Allow-Headers
表明服务器支持的所有头信息字段，不限于浏览器在"预检"中请求的字段。
Access-Control-Allow-Credentials
表示是否允许发送认证信息（Cookie）。
Access-Control-Max-Age
指定本次预检请求的有效期，单位为秒，允许缓存。在缓存期间，不用发出另一条预检请求。
- nginx代理跨域
server {
listen 80;
server_name www.a.com;
# img、css、js常规许可，这里主要针对的字体文件(eot|otf|ttf|woff|svg)相关
location / {
add_header Access-Control-Allow-Origin *;
}
# 匹配以/apis/开头的请求
location ^~ /apis/ {
proxy_pass http://www.b.com; #反向代理
}
}
- nodejs中间件代理跨域
node中间件实现跨域代理，原理大致与nginx相同，都是通过启一个代理服务器，实现数据的转发。
设置vue.config.js （只适合在 本地环境 使用）
# devServer.proxy
module.exports = {
devServer:{
host: 'localhost',//target host
port: 8080,
//proxy:{'/api':{}},代理器中设置/api,项目中请求路径为/api的替换为target
proxy:{
'/api':{
target: 'http://192.168.1.30:8085',//代理地址，这里设置的地址会代替axios中设置的baseURL
changeOrigin: true,// 如果接口跨域，需要进行这个参数配置
//ws: true, // proxy websockets
secure: false, // 使用的是http协议则设置为false，https协议则设置为true
//pathRewrite方法重写url
pathRewrite: {
'^/api': '/'
//pathRewrite: {'^/api': '/'} 重写之后url为 http://192.168.1.16:8085/xxxx
//pathRewrite: {'^/api': '/api'} 重写之后url为 http://192.168.1.16:8085/api/xxxx
}
},
'/pay': {
target: 'http://www.pay.com',
ws: true,
secure:false,
changOrigin: true,
}
}
}
}
- WebSocket协议跨域
WebSocket protocol是HTML5一种新的协议。它实现了浏览器与服务器全双工通信，同时允许跨域通讯，是server push技术的一种很好的实现。原生WebSocket API使用起来不太方便，推荐使用Socket.io，它很好地封装了webSocket接口，提供了更简单、灵活的接口，也对不支持webSocket的浏览器提供了向下兼容。
// 前端
<script src="https://cdn.bootcss.com/socket.io/2.3.0/socket.io.js"></script>
// 与服务器端建立连接
const socket = io('http://www.domain2.com:8080')
// 向服务器端发送信息
socket.emit('sentToServer', '你好，服务器！')
// 3. 获取服务端发送过来的信息
socket.on('sendToClient', message => { console.log(message); })
// 后端
let http = require('http')
let io = require('socket.io')
server.listen('8080');
console.log('Server is running at port 8080')
// 监听socket连接
io.listen(server).on('connection', function(socket) {
// 接收信息
socket.on('sendToServer', function(msg) {
console.log('data from client: ---> ' + msg);
// 往客户端发送信息
io.emit('sendToClient', '你好，客户端！');
})
})
- postMessage跨域
- document.domain + iframe跨域
- location.hash + iframe跨域
- window.name + iframe跨域
- 关闭浏览器的安全模式
* 找到chrome安装目录下的 `chrome.exe` 运行程序，以此创建快捷方式，建议把此快捷方式放到桌面；
* 在电脑硬盘里创建一个空文件夹，并记录此文件夹的路径；
* 右键 `chrome 快捷方式`，找到 `属性` 栏目并点击；
* 在 `目标` 位置最后添加语句，` --disable-web-security --user-data-dir=空文件夹的路径`；
* 然后双击 `chrome 快捷方式` 你可以快乐的跨域了。
扫一扫
291
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
