网站建设书生商友,html旅游网页制作代码,把html文件生成网址,WordPress首行缩进段落目录
什么是跨域
概念
同源策略及限制内容
常见跨域场景
如何解决跨域
CORS
Nginx代理跨域
Node中间件代理跨域
WebSocket
postMessage
JSONP
其他 什么是跨域
概念
在此之前#xff0c;我们了解一下一个域名地址的组成#xff1a; 跨域指的是在网络安全中我们了解一下一个域名地址的组成 跨域指的是在网络安全中由于浏览器的同源策略Same-Origin Policy限制当一个网页的协议、域名或端口与另一个网页的协议、域名或端口不同时就存在跨域问题。如果缺少同源策略的限制可能会导致安全隐患如跨站脚本攻击XSS或跨站请求伪造CSRF等。
同源策略及限制内容
同源策略是浏览器的一项安全机制它限制了来自不同源的脚本对当前文档的访问。同源策略要求资源必须来自同一个源即协议、域名和端口相同并限制了对以下内容的访问 Cookie、LocalStorage、IndexedDB 等存储性内容不允许在不同源之间读取或写入这些数据。 DOM 节点不允许获取来自不同源的 DOM 元素。 AJAX 请求发送后的响应数据如果发起了跨域的 AJAX 请求浏览器会阻止读取其响应内容。
但是有三个标签允许跨域加载资源它们不受同源策略限制
img srcXXXlink hrefXXXscript srcXXX
常见跨域场景
跨域存在于协议、子域名、主域名、端口号中任何一个不相同时。即使两个不同的域名指向同一个 IP 地址只要其中任何一部分不同就被视为不同源。
两个重要点
协议和端口造成的跨域问题需要后端处理前端无法解决。浏览器在判断跨域时主要依据 URL 的首部即协议、域名和端口必须匹配。
跨域并不是指请求发不出去而是浏览器限制了读取来自其他域名下内容的安全策略。例如Ajax 请求会被浏览器拦截响应数据但表单提交不会获取新内容所以可以发起跨域请求。同样跨域并不能完全阻止 CSRF因为请求依然会发送出去只是浏览器会拦截响应。
如何解决跨域
CORS
CORS 通信过程都是浏览器自动完成需要浏览器(都支持)和服务器都支持所以关键在只要服务器支持就可以跨域通信CORS请求分两类简单请求和非简单请求。
CORS请求默认不包含Cookie以及HTTP认证信息如果需要包含Cookie涉及跨域请求携带 Cookie 信息时需要一些特殊设置其中涉及到 CORS 的头部设置以及前端代码的配置。
假设有两个域名https://example.com 和 https://api.example.com前者是网页的域名后者是提供 API 的域名。下面是一个示例演示如何设置跨域请求以在包含 Cookie 的情况下进行
后端设置 CORS 头部
在 API 的响应中设置 CORS 相关头部
// Express 示例
const express require(express);
const app express();// 设置允许跨域请求的域名和允许携带 Cookie
app.use((req, res, next) {res.header(Access-Control-Allow-Origin, https://example.com);res.header(Access-Control-Allow-Credentials, true);next();
});// 处理其他路由或请求
// ...app.listen(3000);
前端发送带有 withCredentials 的请求
在前端如果想要在跨域请求中携带 Cookie需要在 XMLHttpRequest 或 Fetch 请求中设置 withCredentials 为 true
使用 XMLHttpRequest 的示例
const xhr new XMLHttpRequest();
xhr.open(GET, https://api.example.com/data, true);
xhr.withCredentials true; // 允许携带 Cookie
xhr.send();
或者使用 Fetch API
fetch(https://api.example.com/data, {method: GET,credentials: include, // 允许携带 Cookie
});
上述代码中的关键点在于将 withCredentials 或 credentials: include 设置为 true这样浏览器就会在请求中包含当前页面的 Cookie 信息。但要确保后端 API 设置了正确的 Access-Control-Allow-Origin 和 Access-Control-Allow-Credentials 头部并且不要使用 * 通配符而是指定了明确的允许跨域的域名。
简单请求
简单请求指的是符合一定条件的跨域请求类型在这种请求下浏览器会自动在头部中添加 Origin 字段表示请求的来源域服务器根据这个来源决定是否允许请求。满足以下两个条件之一的请求被认为是简单请求
1.请求方法是 HEAD、GET、POST 之一
2.请求头信息不超过一定限制。允许的请求头包括 Accept Accept-Language Content-Language Last-Event-Id Content-Type允许的值为 application/x-www/form/urlencoded、multipart/form-data、text/plain 之一。
这些条件主要为了兼容早期的表单提交方式因为历史上表单提交一直可以跨域。
在这样的简单跨域请求中服务器至少需要设置 Access-Control-Allow-Origin 头部来允许特定来源的请求。如果服务器认可请求会在响应中返回以下必要的 CORS 头部
Access-Control-Allow-Origin这个字段是必须的它指定了允许访问的来源域一般是请求中 Origin 字段的值但也可以是通配符 *表示允许任意来源。Access-Control-Allow-Credentials这个字段是可选的表示是否允许发送 Cookie。如果需要跨域请求携带身份凭证比如 Cookie 或 HTTP 认证信息服务器需要设置这个字段为 true。Access-Control-Expose-Headers这个字段是可选的它指定了响应中可以被前端访问的其他头部信息。Content-Type表示响应的文档类型和字符编码。
简单请求的处理相对较为简单但需要服务器允许特定的跨域访问并设置相应的 CORS 头部来确保安全。
非简单请求
非简单 CORS 请求指的是不符合简单请求条件的跨域请求如使用了 PUT 或 DELETE 方法或者请求的 Content-Type 是 application/json 等。对于这样的请求浏览器会在正式发起请求之前先发送一个 OPTIONS 类型的预检请求。
预检请求的目的是向服务器查询是否允许来自网页所在域名的请求并了解可以使用哪些额外的头信息字段。这个预检请求OPTIONS 请求的头部信息包括
Origin 标识请求来自哪个域是必须的字段。Access-Control-Request-Method 列出 CORS 请求会用到的 HTTP 方法也是必须的字段。Access-Control-Request-Headers 指定 CORS 请求会额外发送的头信息字段用逗号隔开。
服务器收到这个预检请求后根据收到的信息判断是否允许这个请求如果允许则返回相应的 CORS 头部信息。除了允许特定的跨域请求服务器还可以在响应头部中添加 Access-Control-Max-Age 字段来缓存预检请求的结果减少后续请求的预检次数。这个缓存只对完全一样的 URL 生效超出缓存时间后再次发起相同的跨域请求仍会触发预检请求。
Nginx代理跨域
Nginx可以用作反向代理服务器来解决跨域问题。它可以代理客户端的请求并将请求发送到目标服务器再将目标服务器的响应返回给客户端。这种方法类似于 CORS 跨域原理但是它是通过服务器端进行设置而不是在浏览器端进行设置。
以下是一个简单的 Nginx 配置示例用于处理跨域请求
server {listen 81;server_name www.domain1.com;location / {# 设置反向代理proxy_pass http://xxxx1:8080;# 修改 Cookie 中的域名proxy_cookie_domain www.xxxx1.com www.xxxx2.com;# 添加头部信息以处理跨域请求add_header Access-Control-Allow-Origin http://www.xxxx2.com; # 当前端只跨域不带 Cookie 时可以使用 * add_header Access-Control-Allow-Credentials true;}
}
这段配置的作用如下
proxy_pass 指令用于指定反向代理的目标服务器地址。proxy_cookie_domain 用于修改代理服务器返回的响应中的 Cookie 中的域名将它从源域名修改为目标域名确保 Cookie 在跨域时仍然有效。add_header 指令用于添加响应头部信息其中 Access-Control-Allow-Origin 允许特定来源的跨域请求Access-Control-Allow-Credentials 表示是否允许请求携带身份凭证例如 Cookie。
这种方法通过 Nginx 作为代理服务器处理了跨域请求的响应头部允许指定的域名进行跨域请求。这样就可以在不修改前端代码的情况下实现跨域请求的需求。
Node中间件代理跨域
在 vue.config.js 文件中可以通过配置 devServer 的 proxy 选项实现代理转发
module.exports {// 其他配置...devServer: {proxy: {[process.env.VUE_APP_BASE_API]: {target: http://xxxx, // 代理跨域目标接口ws: true,changeOrigin: true,pathRewrite: {[^ process.env.VUE_APP_BASE_API]: }}}}
} proxy 字段用于配置代理。process.env.VUE_APP_BASE_API 是 Vue 项目中定义的环境变量表示需要被代理的请求路径前缀。 target 指定了代理的目标地址即请求将会被代理到这个地址下。 ws 表示是否代理 WebSocket。 changeOrigin 设置为 true 后可以突破浏览器的同源策略允许跨域。 pathRewrite 允许对请求路径进行重写将匹配到的路径前缀去掉。比如如果请求路径是 /api/user经过 pathRewrite 后就会变成 /user将前缀 /api 去掉了。
当使用 Node 中间件进行代理跨域时你可以使用 http-proxy-middleware 包来创建一个代理服务器让后端服务如 Express处理跨域请求。这个中间件可以在 Express 应用程序中使用允许你在服务器端修改请求和响应以便处理跨域问题。
下面是一个在 Express 中使用 http-proxy-middleware 中间件的简单示例
const express require(express);
const { createProxyMiddleware } require(http-proxy-middleware);const app express();app.use(/, createProxyMiddleware({ // 代理跨域目标接口 target: http://xxxx:8080, changeOrigin: true, // 修改响应头信息实现跨域并允许带cookie onProxyRes: function(proxyRes, req, res) { res.header(Access-Control-Allow-Origin, http://xxxx);res.header(Access-Control-Allow-Credentials, true);}, // 修改响应信息中的 cookie 域名 cookieDomainRewrite: www.domain1.com // 可以为 false表示不修改
})); app.listen(3000);
这段代码做了以下事情 引入了 Express 框架和 http-proxy-middleware。 创建了一个 Express 应用。 使用 app.use 将 createProxyMiddleware 中间件应用到根路径 /。 配置了 createProxyMiddleware指定了目标服务器的地址 target开启了 changeOrigin 选项以确保源头地址被更改为目标地址。 在 onProxyRes 中修改了响应头部信息允许跨域并设置了允许携带凭证如 Cookie。 cookieDomainRewrite 可以用于修改响应信息中的 Cookie 域名使其在传输中适应跨域情况。
这种方式可以在后端服务器层面对跨域进行处理允许前端应用向不同域名的后端服务发出请求。
WebSocket
WebSocket是一种在单个 TCP 连接上进行全双工通信的协议它允许客户端和服务器之间进行实时数据交换。与传统的 HTTP 请求不同WebSocket 的连接是持久性的双方可以随时发送数据而不需要等待请求。
在跨域方面WebSocket协议与传统的 HTTP 请求不同它不受同源策略的限制。可以使用 ws://非加密和 wss://加密作为协议前缀不受同源策略的约束只要服务器支持 WebSocket即可与客户端进行通信。
WebSocket请求头中包含 Origin 字段用于指示请求的来源域。服务器可以检查这个字段来判断是否允许与特定域的客户端建立 WebSocket 连接。如果客户端的来源域在服务器的白名单内服务器将允许该连接的建立否则可能会拒绝连接或执行其他安全措施。
通过 WebSocket服务器和客户端之间可以进行持久的双向通信这种通信方式适用于实时性要求较高的场景如在线聊天、实时数据传输等。由于不受同源策略的限制WebSocket提供了一种跨域通信的可选方案。
下面是一个简单的例子展示了如何使用 WebSocket 进行跨域通信。
首先假设有两个域名分别是 domain1.com 和 domain2.com我们将在 domain1.com 的页面上创建 WebSocket 连接到 domain2.com 的服务器
在 domain2.com 的服务器端你需要有一个 WebSocket 服务器例如基于 Node.js 的 ws 模块用于监听 WebSocket 连接
const WebSocket require(ws);const wss new WebSocket.Server({ port: 8080 });wss.on(connection, function connection(ws) {ws.on(message, function incoming(message) {console.log(Received: %s, message);// 可以回复客户端消息ws.send(Hello, client!);});
});
在 domain1.com 的页面上你可以使用 JavaScript 来创建 WebSocket 连接到 domain2.com 的服务器
const socket new WebSocket(ws://domain2.com:8080); // WebSocket服务器的地址socket.onopen function(event) {console.log(WebSocket连接已打开);socket.send(Hello, server!);
};socket.onmessage function(event) {console.log(收到服务器消息:, event.data);
};socket.onclose function(event) {if (event.wasClean) {console.log(连接已关闭);} else {console.log(连接断开);}
};socket.onerror function(error) {console.error(WebSocket连接错误:, error);
};
在这个例子中domain1.com 的页面通过 WebSocket 连接到了 domain2.com 的服务器并向其发送了消息。服务器收到消息后可以进行处理并且也可以通过 WebSocket 向客户端发送消息。
需要注意的是WebSocket 协议在设计上允许跨域通信因此不会受到浏览器同源策略的限制。但是服务器端仍然可以根据自己的逻辑来判断是否接受来自特定来源的连接。
postMessage
postMessage 是 HTML5 中的一项 API它允许在不同窗口包括 iframe或不同来源的文档间进行安全地消息传递。这种通信机制可以用于多种场景
1️⃣ 页面和新打开的窗口之间的数据传递
2️⃣ 不同窗口包括不同域的窗口之间的通信
3️⃣ 页面与嵌套的 iframe 之间的数据传递
4️⃣ 不同源的跨域传递数据
postMessage 接受两个参数
第一个参数是要发送的数据可以是字符串、对象等。
第二个参数是指定消息发送的目标窗口的来源。这个参数通常是一个目标窗口的 origin协议 域名 端口也可以是通配符 *表示任意窗口或者 /表示与当前窗口同源的窗口。
例如在一个页面中可以使用以下方式向另一个窗口发送消息
// 获取目标窗口对象
const targetWindow window.open(https://example.com, _blank);// 向目标窗口发送消息
targetWindow.postMessage({ message: Hello, window!, value: 42 }, https://example.com);
在目标窗口中可以监听 message 事件来接收来自其他窗口的消息
// 监听 message 事件
window.addEventListener(message, function(event) {// 判断消息来源是否符合预期if (event.origin https://sending-origin.com) {// 处理接收到的消息console.log(Received message:, event.data);}
});
JSONP
JSONPJSON with Padding是一种利用 script 标签实现的跨域数据请求方法。其原理是通过动态创建 script 标签向服务器请求数据并在请求的 URL 中包含一个回调函数名。服务器收到请求后将数据包裹在回调函数中返回给客户端从而绕过浏览器的同源策略限制。
JSONP 主要用于 GET 请求并不适用于其他 HTTP 方法且存在安全隐患容易受到 XSS跨站脚本攻击的影响。但它有一些优点比如可以向不支持 CORS 的旧浏览器或不支持跨域请求的网站请求数据。
使用 JSONP 的示例代码如下
// 创建一个包含回调函数的 URL
const url http://juejin.com/xxx?callbackhandleCallback;// 创建一个 script 标签
const script document.createElement(script);// 设置 script 的 URL
script.src url;// 将 script 添加到页面中
document.body.appendChild(script);// 定义回调函数处理从服务器返回的数据
function handleCallback(res) {console.log(res);
}
服务器接收到这个请求后会将数据放在 handleCallback 函数中返回例如
handleCallback({ code: 200, msg: success, data: [] });在客户端这个函数 handleCallback 将立即执行从而完成数据的处理和操作。
虽然 JSONP 具有一定的局限性和安全风险但在某些场景下仍然是一种有效的跨域数据获取方式。
其他
除了以上提到的一些常见的解决跨域的方法以外还有其他的方式可以来解决这个问题。
1. document.domain iframe适用于主域名相同但子域名不同的跨域场景。当两个页面的 document.domain 设置为同一个值主域名它们就可以相互通信。但这种方法仅适用于主域名相同的情况。
2. window.name iframe利用 iframe 的 window.name 属性这个属性在不同页面或者不同域名加载后依然保持不变。通过在不同页面的 iframe 中设置和读取 window.name可以实现跨域通信。window.name 具有持久性且可以存储较大量的数据。
3. location.hash iframe适用于页面间利用 URL 的 hash 部分来传递信息特别是在 C 页面帮助 A 页面和 B 页面进行通信。通过改变 URL 的 hash 部分来传递信息在不同页面之间进行简单的数据交换。
这些方法虽然可以解决一些特定的跨域通信问题但由于它们的特性和限制通常只适用于特定场景并且可能存在一些安全性或者容量方面的限制。因此在使用这些方法时需要仔细考虑其适用范围和可能带来的安全隐患。
好啦本文就到这里结束了感谢阅读~~
