HTTP跨域

1. 简介

HTTP跨域是指不同域名下的网页请求资源时,由于浏览器同源策略限制,导致请求被阻止。为解决这一问题,开发者常采用跨域资源共享(CORS)等技术来允许合法跨域请求,确保网站功能正常运行。

同源

  • 协议
  • 域名
  • 端口

常见HTTP跨域技术

  • 跨域资源共享(CORS):下面会专门介绍。
  • JSONP:下面会专门介绍。
  • WebSocket:WebSocket不受同源策略限制,可以实现跨域通信。
  • 代理服务器:在服务器端设置一个代理,前端请求发送到这个代理,然后由代理去请求真正的跨域资源,最后返回给前端。

2. 跨域资源共享(CORS)

2.1. 简介

跨域资源共享(CORS)是一种Web标准,允许浏览器和服务器交互,确定是否允许跨源请求,从而克服同源策略限制,实现跨域数据交互。

2.2. 允许跨域资源共享

http 复制代码
Access-Control-Allow-Origin: *
Access-Control-Allow-Headers: Content-Type, Content-Length, Authorization, Accept, X-Requested-With, X_Requested_With
Access-Control-Allow-Methods: GET, POST
Access-Control-Expose-Headers: header_name1,header_name2
  • Access-Control-Allow-Origin:允许请求源
  • Access-Control-Allow-Headers:允许的请求头(CORS Missing Allow Header)
  • Access-Control-Allow-Methods:允许的请求方法
  • Access-Control-Expose-Headers:允许请求对象读取响应的头

2.3. 允许携带Cookie

浏览器

js 复制代码
// 创建ajax对象
var xhr = new XMLHttpRequest();
// 对ajax对象进行配置
xhr.open('post', 'http://localhost:8080/xxxx');
// 当发送跨域请求时,携带cookie信息
xhr.withCredentials = true;
// 下面省略

服务端

http 复制代码
Access-Control-Allow-Credentials:true

注意

如果服务器设置了Access-Control-Allow-Credentials:trueAccess-Control-Allow-Origin不能为*

这是因为当发送凭据时,出于安全考虑,不允许使用通配符来允许所有源。

3. JSONP

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Example</title>
</head>
<body>
<h1>hello world</h1>
<h1>当前页面是http://localhost:8080,注意端口是不一致的。</h1>
</body>
<!--js路径后面添加请求参数,服务器根据请求参数动态替换test.js中数据-->
<script src="http://localhost:8081/test.js?key1=value1&key2=value2"></script>
</html>

4. 参考

相关推荐
‍。。。3 分钟前
使用Rust实现http/https正向代理
http·https·rust
田三番18 小时前
使用 vscode 简单配置 ESP32 连接 Wi-Fi 每日定时发送 HTTP 和 HTTPS 请求
单片机·物联网·http·https·嵌入式·esp32·sntp
dulu~dulu18 小时前
查缺补漏----用户上网过程(HTTP,DNS与ARP)
网络·网络协议·http
丶213619 小时前
【网络】HTTP(超文本传输协议)详解
网络·网络协议·http
binqian1 天前
【k8s】ClusterIP能http访问,但是不能ping 的原因
http·容器·kubernetes
MetaverseMan1 天前
http防抖和ws防抖
网络·网络协议·http
暂时先用这个名字1 天前
常见 HTTP 状态码分类和解释及服务端向前端返回响应时的最完整格式
前端·后端·网络协议·http·状态码·国产化·响应
圈圈的熊2 天前
HTTP 和 HTTPS 的区别
前端·网络协议·http·https
这题怎么做?!?2 天前
【Linux】网络编程:实现一个简易的基于HTTP协议格式、TCP传输的服务器,处理HTTP请求并返回HTTP响应;GET方法再理解
linux·服务器·c语言·网络·c++·tcp/ip·http
小兔子酱#3 天前
【Linux 26】应用层协议 - HTTP
linux·运维·服务器·网络·网络协议·http