HTTP跨域

yimtcode

于 2024-03-21 19:50:44 发布

阅读量608

点赞数 4

分类专栏：计算机网络文章标签： http 跨域 JSONP

本文链接：https://blog.csdn.net/yimtcode/article/details/136918732

版权

计算机网络专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1. 简介

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

同源

协议
域名
端口

常见HTTP跨域技术

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

2. 跨域资源共享（CORS）

2.1. 简介

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

2.2. 允许跨域资源共享

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

浏览器

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

服务端

Access-Control-Allow-Credentials：true

注意

如果服务器设置了Access-Control-Allow-Credentials：true时Access-Control-Allow-Origin不能为*。
这是因为当发送凭据时，出于安全考虑，不允许使用通配符来允许所有源。

3. JSONP

<!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. 参考

vue axios无法获取响应头字段

yimtcode

关注

4
点赞
踩
9

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTTP跨域

HTTP跨域是指不同域名下的网页请求资源时，由于浏览器同源策略限制，导致请求被阻止。为解决这一问题，开发者常采用跨域资源共享（CORS）等技术来允许合法跨域请求，确保网站功能正常运行。同源协议域名端口常见HTTP跨域技术跨域资源共享（CORS）：下面会专门介绍。JSONP：下面会专门介绍。WebSocket：WebSocket不受同源策略限制，可以实现跨域通信。代理服务器：在服务器端设置一个代理，前端请求发送到这个代理，然后由代理去请求真正的跨域资源，最后返回给前端。
复制链接

扫一扫