赞
踩
JSONP(JSON with Padding,填充式 JSON 或参数式 JSON)是一种通过
CORS 是一种通过服务器设置响应头信息,允许指定域名的请求跨域访问资源,从而实现跨域资源共享的技术。具体而言,在服务端设置 Access-Control-Allow-Origin 响应头字段来指定允许的来源域名,以及其他相关的响应头信息。
在服务端实现 CORS 跨域请求,需要配置相应的 HTTP 响应头。常见的响应头字段包括:
下面是一个 Node.js Express 框架的示例代码:
const express = require('express');
const app = express();
app.use(function(req, res, next) {
res.setHeader('Access-Control-Allow-Origin', '*');
res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
res.setHeader('Access-Control-Allow-Credentials', 'true');
next();
});
// 处理路由和请求
// ...
app.listen(8080);
上述代码中,我们通过设置响应头来实现 CORS 跨域请求的支持。需要注意的是,如果设置了 Access-Control-Allow-Credentials 为 true,则在服务端也需要设置 req.header(‘Access-Control-Allow-Credentials’, ‘true’) 来响应凭证信息。此外,CORS 跨域请求还需要确保客户端和服务端的协议、域名和端口号均相同或允许跨域。
代理服务器是一种通过在同一个域名下设置一个代理服务器,将需要跨域访问的请求先发送到代理服务器上,再由代理服务器向目标服务器发出请求,并将请求结果返回给客户端的技术。这样客户端就可以避免直接访问跨域服务器,从而可以绕开浏览器的同源策略。
在 dva 项目中配置 proxy 可以通过修改 package.json 文件来实现。下面是一个详细的 dva 项目配置 proxy 的示例:
const proxy = require('http-proxy-middleware');
module.exports = function(app) {
app.use(
'/api', // 需要代理的请求前缀
proxy({
target: 'http://localhost:8080', // 设置代理目标地址
changeOrigin: true, // 如果代理服务器和目标服务器协议、域名或端口不同,需要设置为 true
pathRewrite: {
'^/api': '' // 将请求路径的前缀 /api 去掉
}
})
);
};
上述代码配置了一个代理,将所有以 /api 开头的请求转发到 http://localhost:8080/ 上,并将请求路径的前缀 /api 去掉。如果代理服务器和目标服务器协议、域名或端口不同,需要将 changeOrigin 设置为 true。
{
"name": "my-dva-app",
"version": "0.1.0",
"dependencies": {
// ...
},
"scripts": {
// ...
},
"proxy": "http://localhost:3000/",
}
上述代码中,我们将 “proxy” 字段设置为 http://localhost:3000/,这意味着所有以 /api 开头的请求会被转发到 http://localhost:3000/api 上。
import { delay } from 'dva/saga'; import request from '../utils/request'; export default { namespace: 'example', state: { data: null, }, effects: { *fetchData(_, { call, put }) { yield call(delay, 1000); // 模拟延迟 const result = yield call(request, '/api/data'); // 请求地址为 /api/data yield put({ type: 'saveData', payload: result.data, }); }, }, reducers: { saveData(state, { payload }) { return { ...state, data: payload, }; }, }, };
上述代码中,我们在 effects 的 fetchData 方法中使用了 request 工具函数来发起一个 GET 请求,请求的地址为 /api/data,实际上会被代理转发到 http://localhost:8080/data 上。无论是 fetch 还是使用 dva-loading,只要在 URL 中加上 /api 前缀即可。
postMessage 是一种在不同窗口之间通过 postMessage 方法发送消息,从而实现数据的跨域传输的技术。具体而言,在前端页面中使用 postMessage 方法来向目标域名发送一条消息,并在目标页面中通过监听 message 事件来接收并处理该消息。
在实际应用场景中,我们可能需要在不同的窗口/iframe 中进行通信,比如说,在一个页面中内嵌了多个 iframe 窗口,这些窗口之间需要进行数据交互。如果这些窗口处于同一个域名下,我们就可以通过 JavaScript 变量或者全局事件来进行通信,但是如果它们处于不同的域名下,我们就无法直接进行通信了。
这时候,就可以使用 postMessage
来完成跨域通信了。具体实现步骤如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Parent Window</title> </head> <body> <!-- 创建一个 iframe 窗口 --> <iframe id="childWindow" src="http://example.com"></iframe> <script> // 监听子窗口发送的消息 window.addEventListener('message', (event) => { // 首先判断消息来源是否合法 if (event.origin === 'http://example.com') { // 获取消息内容并进行处理 const message = event.data; console.log('Received message from child window:', message); } }); </script> </body> </html>
在上面的代码中,我们在父窗口中创建了一个 iframe
窗口,并加载了一个跨域网站(http://example.com)。在父窗口中,我们使用 window.addEventListener()
方法监听 message
事件,当子窗口向父窗口发送消息时会触发该事件。在事件处理函数中,我们首先判断消息来源是否合法,如果合法,则获取到消息的内容并进行相应的处理。
window.parent
获取到父窗口对象,并向父窗口发送消息。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Child Window</title> </head> <body> <script> // 向父窗口发送消息 const targetOrigin = 'http://localhost:8080'; const parentWindow = window.parent; parentWindow.postMessage('Hello, Parent Window!', targetOrigin); // 监听父窗口发送的消息 window.addEventListener('message', (event) => { // 首先判断消息来源是否合法 if (event.origin === 'http://localhost:8080') { // 获取消息内容并进行处理 const message = event.data; console.log('Received message from parent window:', message); } }); </script> </body> </html>
在上面的代码中,我们在子窗口中使用 window.parent
获取到父窗口对象,并使用 postMessage
方法向父窗口发送了一条消息。在最后一行代码中,targetOrigin
参数指定了目标窗口的域名和端口号,以确保消息能够被正确地发送到父窗口。在子窗口中,我们同样监听 message
事件,并在事件处理函数中获取到父窗口发送的消息内容。
要通过 postMessage
实现父窗口向子窗口发送数据,可以在父窗口中使用 iframe
元素的 contentWindow
属性获取到子窗口的 window 对象,然后调用该对象的 postMessage()
方法来发送消息。
具体实现步骤如下:
contentWindow
属性获取到子窗口的 window 对象,并调用它的 postMessage()
方法发送消息。<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Parent Window</title> </head> <body> <!-- 创建一个 iframe 窗口 --> <iframe id="childWindow" src="http://example.com"></iframe> <script> const childWindow = document.getElementById('childWindow'); // 发送数据给子窗口 function sendDataToChild(data) { const targetOrigin = 'http://example.com'; childWindow.contentWindow.postMessage(data, targetOrigin); } // 在需要发送数据的时候调用 sendDataToChild() 函数 sendDataToChild('Hello, Child Window!'); </script> </body> </html>
在上面的代码中,我们在父窗口中创建了一个 iframe
窗口,并加载了一个跨域网站(http://example.com)。在父窗口中,我们通过 document.getElementById()
方法获取到子窗口的 iframe
元素,然后使用 contentWindow
属性获取到子窗口的 window 对象。在 sendDataToChild()
函数中,我们调用该对象的 postMessage()
方法来向子窗口发送数据。
需要注意的是,在调用 postMessage()
方法时,第一个参数为要发送的数据,可以是任意类型的数据,比如字符串、数字、数组等;第二个参数为目标窗口的源(origin),可以指定一个字符串或者一个 URL 对象,用来控制数据发送的目标。如果不需要限制目标窗口,可以传入 ‘*’。具体使用时需要根据实际需求来设置。
综上所述,通过使用 postMessage
,我们可以在不同的窗口/iframe 或者跨域时进行跨文档通信,实现数据的传递和交互。需要注意的是,在实际应用中,我们需要根据具体的需求和安全性考虑来选择合适的参数和方式进行配置和使用。
WebSocket 是一种使用 HTTP 协议进行握手,建立一条持久性的连接,并通过该连接实现数据的实时推送和跨域传输的技术。
它允许客户端和服务器之间建立持久连接,使得双方可以实时地传递数据。相比于传统的 HTTP 请求-响应模式,WebSockets 可以减少网络延迟,提高数据传输的效率,同时也支持服务端向客户端主动推送数据。
WebSockets 协议实现了一个基于帧的消息传递机制,通过使用 WebSocket API,开发者可以方便地实现复杂的实时数据传输场景,比如在线聊天、多人游戏等等。
在服务器端,我们需要创建一个 WebSocket 的实例,并监听 connection
事件,在该事件处理函数中,可以获取到客户端连接的 WebSocket
对象,并通过它来处理后续的通信。
const WebSocket = require('ws');
const wss = new WebSocket.Server({ port: 8080 });
wss.on('connection', (ws) => {
console.log('A new client connected.');
// 监听客户端发送的消息
ws.on('message', (data) => {
console.log('Received message from client:', data);
// 发送消息给客户端
ws.send('Hello, Client!');
});
});
在上面的代码中,我们首先引入了 Node.js 的 WebSocket 模块,并创建了一个 WebSocket 的服务器实例,监听本地的 8080 端口。在 connection
事件处理函数中,我们可以获取到客户端连接的 WebSocket
对象,并通过它来监听 message
事件和发送消息。
在客户端,我们同样需要创建一个 WebSocket 的实例,并连接到服务器。在连接成功后,可以通过该实例来监听服务器发送的消息。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>WebSocket Example</title> </head> <body> <script> const socket = new WebSocket('ws://localhost:8080'); // 监听连接成功事件 socket.onopen = (event) => { console.log('Connected to server.'); // 发送消息给服务器 socket.send('Hello, Server!'); }; // 监听服务器发送的消息 socket.onmessage = (event) => { console.log('Received message from server:', event.data); }; </script> </body> </html>
在上面的代码中,我们创建了一个 WebSocket 的实例,并连接到服务器的地址(ws://localhost:8080)。在连接成功后,onopen
回调函数会被触发,此时我们可以通过 send()
方法向服务器发送消息。客户端还可以监听 onmessage
回调函数,从而获取服务器发送的消息内容。
综上所述,WebSocket 是一种实现双向通信的协议,其使用方式与传统的 HTTP 协议有一些不同,需要开发者进行相应的调整和适配。在实际应用中,我们需要根据具体的需求和场景来选择合适的协议和工具来实现数据通信。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。