2025年前端跨域设置（前端跨域设置什么意思）

编程日记 • 2025-10-10 17:46 • 阅读 39

思路：

先看下代码结构，相对比较的简单：

前端设置允许跨域 axios 前端跨域携带cookie_Access

服务的代码：

的代码：

服务的代码：

这个时候环境基本就搭建好了。

首先我们先在服务的页面中得到一个,运行服务：

然后打开: 没有问题的话，页面长这样：

前端设置允许跨域 axios 前端跨域携带cookie_前端设置允许跨域 axios_02

这个时候打开控制台：可以看到发送了一个请求，并且设置了cookie,也可以选择浏览器控制台的页签，选中，可以看到的信息：

前端设置允许跨域 axios 前端跨域携带cookie_html_03

前端设置允许跨域 axios 前端跨域携带cookie_前端设置允许跨域 axios_04

然后我们页面上的发送同源请求按钮，可以看到发送了一个user请求，并且已经携带上了cookie：

前端设置允许跨域 axios 前端跨域携带cookie_html_05

接下来刺激的画面来了，我们 发送跨域请求 按钮，出现了跨域请求的报错：

前端设置允许跨域 axios 前端跨域携带cookie_前端_06

重点：接下来开始解决跨域携带cookie问题：

1. 在前端请求的时候设置request对象的属性withCredentials为true;

什么是？

XMLHttpRequest.withCredentials属性是一个Boolean类型，它指示了是否该使用类似cookies,authorization headers(头部授权)或者TLS客户端证书这一类资格证书来创建一个跨站点访问控制（cross-site ）请求。在同一个站点下使用

如果在发送来自其他域的XMLHttpRequest请求之前，未设置为true，那么就不能为它自己的域设置cookie值。而通过设置为true获得的第三方cookies，将会依旧享受同源策略，因此不能被通过document.cookie或者从头部相应请求的脚本等访问。

这个时候再去发送一个跨域请求，你会发现依旧报错，但是我们仔细看下报错，意思是需要设置header的属性：

前端设置允许跨域 axios 前端跨域携带cookie_前端设置允许跨域 axios_07

2. 在服务端设置

我们修改(app2.js)服务的代码：

修改完之后再次发送一个跨域请求，你会发现，又报错了(接近崩溃)，但是跟之前报的错不一样了，意思大概就是这个属性应该设置为，但是显示得到的是个：

前端设置允许跨域 axios 前端跨域携带cookie_html_08

3. 在服务端设置

再次修改B服务的代码（每次修改后需要重新运行）：

再发送一个跨域请求：

前端设置允许跨域 axios 前端跨域携带cookie_前端设置允许跨域 axios_09

前端设置允许跨域 axios 前端跨域携带cookie_前端设置允许跨域 axios_10

可以看到，这个跨域请求已经请求成功并且返回数据了！而且也携带了服务的，这个时候已经大功告成了。

今天的文章 2025年前端跨域设置（前端跨域设置什么意思）分享到此就结束了，感谢您的阅读。