前端跨域访问

最新推荐文章于 2025-04-21 18:22:48 发布

百日梦想家

最新推荐文章于 2025-04-21 18:22:48 发布

阅读量357

点赞数 1

分类专栏：前端 node.js vue 文章标签：前端 node

本文链接：https://blog.youkuaiyun.com/qq_42418169/article/details/116546623

版权

vue 同时被 3 个专栏收录

30 篇文章

订阅专栏

前端

7 篇文章

订阅专栏

node.js

7 篇文章

订阅专栏

同源策略限制了浏览器不同域之间的资源访问，防止XSS和CSRF攻击。跨域请求时，浏览器会拦截响应。CORS通过后端设置响应头实现跨域，如`Access-Control-Allow-Origin`、`Access-Control-Allow-Methods`和`Access-Control-Allow-Headers`。对于POST请求，需设置`Content-Type`。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是同源策略

同源是指"协议+域名+端口"三者相同。
同源策略是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，浏览器很容易受到XSS、CSRF等攻击。

在这里插入图片描述

什么是跨域请求

当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。不同域之间相互请求资源，就算作“跨域”。

同源策略限制内容有：
Cookie、LocalStorage、IndexedDB 等存储性内容
DOM 和 Js对象无法获得
AJAX 请求发送后，结果被浏览器拦截了

请求跨域了，那么请求发出去没有？

跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。你可能会疑问明明通过表单的方式可以发起跨域请求，为什么 Ajax 就不会?因为归根结底，跨域是为了阻止用户读取到另一个域名下的内容，Ajax 可以获取响应，浏览器认为这不安全，所以拦截了响应。但是表单并不会获取新的内容，所以可以发起跨域请求。同时也说明了跨域并不能完全阻止 CSRF，因为请求毕竟是发出去了。

cors跨域实现

CORS 需要浏览器和后端同时支持，但实现 CORS 通信的关键还是后端。

后端服务器在response(响应)头上添加一下参数：

// 设置允许来自哪个地址的请求可以通过跨域
response.setHeader("Access-Control-Allow-Origin","http://localhost:9000");
// 设置允许的请求头，*通配符代表任意，例如允许特定请求头：Access-Control-Allow-Headers:x-token,authorization....
response.setHeader("Access-Control-Allow-Headers","*");
// 设置允许跨域请求方法类型，默认允许get 例如允许get，post方法：Access-Control-Allow-Methods:Get,Post
// 同样可以设置通配符*代表允许所有方法
response.setHeader("Access-Control-Allow-Methods","*");

post跨域请求，必须要设置Content-Type

"Content-Type: application/x-www-form-urlencoded;"