Web：跨域

最新推荐文章于 2022-05-03 18:30:54 发布

yimtcode

最新推荐文章于 2022-05-03 18:30:54 发布

阅读量147

点赞数

分类专栏：前端

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

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Web：跨域

一、同源

协议
域名
端口全部相同

同源下身是为了保证用户信息的安全，防止恶意的网站窃取数据，同源是浏览器行为不是服务器后台行为，浏览器禁止读取远程响应数据。

二、JSONP方式

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>JSONP</title>
</head>
<body>
<script>
    function demo(data) {
        console.log(data);
    }

</script>
<!--
当前网页是http://localhost:3000/demo.html
请求http://localhost:30001/test的JavaScript时响应demo("hello");调用已有方法，将非同源服务器数据传递进来。
在需要添加请求参数时我们可以http://localhost:30001/test?key1=value1&key2=value2...
-->
<script src="http://localhost:30001/test"></script>
</body>
</html>

二、CORS方式

（一）简介

CORS：全称为 Cross-origin resource sharing，即跨域资源共享，它允许浏览器向跨域服务器发送 Ajax 请求，克服了 Ajax 只能同源使用的限制。

浏览器请求头：

# 请求源，浏览器自动添加不需要我们处理
origin: http://localhost:3000

服务器端响应头：

# *：客户端允许所有源请求
# http://localhost:3000：客户端允许来自http://localhost:3000请求
Access-Control-Allow-Origin: '*'
# 客户端允许的请求方法
'Access-Control-Allow-Methods': 'GET, POST

（二）允许携带Cookie

浏览器：

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

服务端：

# 允许客户端发送请求时携带Cookie
Access-Control-Allow-Credentials：true

（三）注意

如果服务器设置了Access-Control-Allow-Credentials：true时Access-Control-Allow-Origin不能为*。
因为出于安全方面原因Access-Control-Allow-Origin：*允许任意来源请求，Access-Control-Allow-Credentials：true允许使用请求使用Cookie，如果已经登录A网站并且服务器设置Cookie存储在浏览器中，此时在打开B网站，B网站在向A网站发送请求会自动携带Cookie（已登录状态）是很危险的行为。