企业做网站的费用,一起做财经网站,电商企业有哪些,深汕特别合作区天气预报跨域访问#xff08;Cross-Origin Resource Sharing#xff0c;简称CORS#xff09;是现代Web开发中常见的一种技术需求。由于浏览器的同源策略#xff08;Same-Origin Policy#xff09;#xff0c;不同域名、协议或端口之间的资源无法直接交互#xff0c;这对前端开发…跨域访问Cross-Origin Resource Sharing简称CORS是现代Web开发中常见的一种技术需求。由于浏览器的同源策略Same-Origin Policy不同域名、协议或端口之间的资源无法直接交互这对前端开发者带来了挑战。然而通过合法的跨域访问技术开发者可以绕过这些限制安全地进行跨域请求。本文将介绍如何合法地实现跨域访问并解释相关的技术和最佳实践。
1. 什么是跨域访问
跨域访问指的是在一个域名的网页中通过JavaScript向另一个域名的服务器发起请求获取资源。由于浏览器的同源策略来自不同源即不同域名、协议、端口的组合的网页无法直接相互访问数据。这种策略是为了保护用户的隐私和安全避免恶意网站窃取用户数据。
示例
网页 https://www.example.com 试图从 https://api.example.com 请求数据。网页 https://www.example.com 试图从 https://api.different.com 请求数据。
在同源策略下第一个请求是允许的因为它们属于相同的域但第二个请求就会被阻止。
2. 合法的跨域访问方法
要合法地实现跨域访问必须采用一些方法来解决同源策略的限制。以下是几种常用的合法跨域访问技术
2.1 跨域资源共享CORS
CORSCross-Origin Resource Sharing是最常见的跨域访问解决方案。它是一个浏览器端的机制通过在服务器的响应头中添加特定的跨域信息允许客户端通常是JavaScript代码跨域访问服务器资源。
CORS 的工作原理
简单请求Simple Requests浏览器发起跨域请求时会检查请求是否符合“简单请求”的标准。符合条件时浏览器会自动发送带有CORS头部的请求。预检请求Preflight Request对于一些复杂请求如使用PUT、DELETE方法或自定义头部的请求浏览器会先发送一个OPTIONS请求来确认目标服务器是否允许跨域访问。如果服务器允许则继续发送实际的请求。
CORS 响应头
Access-Control-Allow-Origin指定哪些源可以访问资源。例如Access-Control-Allow-Origin: * 允许所有来源的请求或指定特定域名如 Access-Control-Allow-Origin: https://www.example.com。Access-Control-Allow-Methods允许哪些HTTP方法进行跨域访问例如 GET, POST, PUT, DELETE 等。Access-Control-Allow-Headers允许跨域请求中携带哪些自定义头部。Access-Control-Allow-Credentials是否允许携带用户凭证如cookieAccess-Control-Allow-Credentials: true。
CORS 的优点
安全性较高由服务器决定是否允许跨域访问。支持多种HTTP方法和自定义请求头。
示例
Access-Control-Allow-Origin: https://www.example.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Content-Type, Authorization2.2 JSONPJSON with Padding
JSONP是一种绕过同源策略的技术允许从服务器获取JSON格式的数据。它通过动态创建script标签来进行跨域请求。由于script标签不受同源策略的限制因此可以跨域加载脚本。
使用方式
在请求中传递一个回调函数名服务器返回一个调用该回调函数的JavaScript代码代码中包含数据。浏览器执行返回的JavaScript代码并通过回调函数处理数据。
优点
实现简单可以用于GET请求。不依赖CORS适用于不支持CORS的浏览器或旧浏览器。
缺点
只能处理GET请求不能进行其他HTTP方法的请求。安全性较差因为它允许执行服务器返回的JavaScript代码可能会导致XSS攻击。
示例
script srchttps://api.example.com/data?callbackhandleResponse/scriptfunction handleResponse(data) {console.log(data);
}2.3 代理服务器
如果服务器不支持CORS或JSONP另一种常见的做法是使用代理服务器。通过在前端和目标服务器之间设置一个代理前端请求可以先发送到自己的服务器代理服务器再向目标服务器发起请求最后将结果返回给前端。
代理的工作原理
前端发送请求到本地代理服务器。代理服务器再发送请求到目标服务器。目标服务器返回数据给代理服务器代理服务器将数据转发给前端。
优点
可以绕过跨域限制支持任何HTTP方法。可以在代理服务器中添加安全性验证、缓存等功能。
示例Node.js代理
const express require(express);
const axios require(axios);
const app express();app.get(/api, async (req, res) {try {const response await axios.get(https://api.example.com/data);res.json(response.data);} catch (error) {res.status(500).send(Error fetching data);}
});app.listen(3000, () {console.log(Proxy server running on http://localhost:3000);
});2.4 WebSocket
WebSocket是一种基于TCP的协议允许在客户端和服务器之间建立持久的双向通信连接。它不像HTTP请求那样受同源策略的限制因此可以用于跨域通信。
优点
支持双向实时通信。不受同源策略限制可以跨域连接。
示例
const socket new WebSocket(wss://example.com/socket);
socket.onopen function() {console.log(WebSocket connected);
};
socket.onmessage function(event) {console.log(Message from server: , event.data);
};3. 跨域访问的安全性问题
虽然有多种合法的跨域技术但跨域访问涉及到安全性问题尤其是CORS、代理服务器和WebSocket等技术可能带来以下风险
跨站请求伪造CSRF恶意网站可能利用已登录用户的身份发起请求危害用户数据安全。数据泄露如果CORS配置不当可能会允许不可信的第三方站点访问敏感数据。XSS攻击尤其是JSONP可能允许恶意代码执行从而导致XSS攻击。
因此跨域访问时需要格外小心确保正确配置CORS响应头并对所有来自外部的请求进行严格验证和控制。
4. 总结
合法的跨域访问是Web开发中不可避免的问题常见的解决方案包括CORS、JSONP、代理服务器和WebSocket等。每种方法都有其适用场景和优缺点开发者应根据实际需求选择合适的跨域访问方式。在实现跨域时务必注意安全性确保数据不被滥用或泄露。
目录
一浏览器发起 HTTP 请求的典型场景_浏览器如何发送用户名密码的请求-CSDN博客
二基于ABNF语义定义的HTTP消息格式-CSDN博客
三:网络为什么要分层OSI模型与TCP/IP模型-CSDN博客
四HTTP的诞生它解决了哪些网络通信难题-CSDN博客
五评估Web架构的七大关键属性-CSDN博客
六从五种架构风格推导出HTTP的REST架构-CSDN博客
七如何用Chrome的Network面板分析HTTP报文-CSDN博客
八URI的基本格式及其与URL的区别-CSDN博客
九为什么要对URI进行编码-CSDN博客
十详解HTTP的请求行-CSDN博客
十一HTTP 状态码详解解读每一个响应背后的意义-CSDN博客
十二HTTP错误响应码理解与应对-CSDN博客
十三如何管理跨代理服务器的长短连接-CSDN博客
十四HTTP消息在服务器端的路由-CSDN博客
十五代理服务器转发消息时的相关头部-CSDN博客
十六请求与响应的上下文-CSDN博客
十七Web内容协商与资源表述-CSDN博客
十八HTTP包体的传输方式1定长包体-CSDN博客
十九HTTP包体的传输方式2不定长包体-CSDN博客
二十HTML Form表单提交时的协议格式-CSDN博客
二十一断点续传与多线程下载是如何做到的-CSDN博客
二十二Cookie的格式与约束-CSDN博客
二十三Session及第三方Cookie的工作原理-CSDN博客
二十四浏览器为什么要有同源策略-CSDN博客
