常见跨域方式

梳理一下常见的跨域方式

同源策略与跨域的关系

• 同源策略三要素：协议、host(域名/ip)、端口；
• 三者相同为同源，否则为跨域访问;
• 同源和跨域是浏览器的行为,是浏览器安全机制；

跨域方式

CORS(Cross-Origin Resource Sharing)

• Access-Control-Allow-Origin：指定允许访问资源的源（域名），是必须的。如果没有设置这个头，浏览器将会阻止跨域请求。
• Access-Control-Allow-Methods：指定允许的HTTP方法，在处理复杂请求（如使用PUT、DELETE等方法或自定义头时）时需要设置。如果只使用简单请求（如GET和POST）且不需要特定的处理，可以不设置。
• Access-Control-Allow-Headers：指定允许的自定义请求头，如果你在请求中使用了自定义头（如X-Custom-Header），则需要设置这个头。如果只使用简单请求头（如Content-Type、Accept等），可以不设置。

JSONP(JSON with Padding)

• JSONP是一种早期的跨域解决方案，只能发起get请求，通过<script>标签不受同源策略限制的特性来实现跨域请求，
• 步骤：

1. 服务端返回JSONP格式数据，如

   const express = require('express');
   const app = express();
   const port = 3000;
    
   app.get('/api/jsonp', (req, res, next) => {
       const callback = req.query.callback
       const data = JSON.stringify( { name: 'jiawei', age: 18 } )
       res.send(`${callback}(${data});`)
   })
    
   app.listen(port, () => {
       console.log(`Example app listening on port ${port}`)
   })

2. 客户端定义回调函数，并通过script发起请求，如

   <script>
       function cbData(data) {
           console.log("data", data);
       }
   </script>
   <script src="http://www.b.com/api/jsonp?callback=cbData"></script>

• 自动回调的原因是，response返回的是一串原始的js代码，所以script会对其进行自动执行，类似于src引入了一个其他的js一样。

PROXY代理跨域

1. 前端请求自己的同源服务器
2. 同源服务器后端将请求转发到跨域服务器上，并返回结果。

备注

• ajax默认情况下，受到浏览器同源策略限制，不可跨域。
• ajax发起的前端请求中，referer字段不可以指定。（浏览器侧有安全限制）。
• Origin和Referer的区别：
  • Referer用于向服务器提供关于请求的来源页面地址，可以带path
  • Origin表示发起请求的源（域、协议和端口），用于CORS验证，更关注安全性，不带path

参考

• https://juejin.cn/post/6844903892170309640
• https://blog.csdn.net/weijia_kmy/article/details/139076231
• https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Guides/CORS

本文作者： yd0ng
本文链接： https://blog.yd0ng.top/2025/09/23/%E8%B7%A8%E5%9F%9F%E6%9C%BA%E5%88%B6/
版权声明： 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可。转载请注明出处！

赏

谢谢您的打赏，大家一起加油喔~

支付宝

微信