关于跨域的解决方案

最新推荐文章于 2025-08-15 09:01:53 发布

转载最新推荐文章于 2025-08-15 09:01:53 发布 · 234 阅读

文章标签：

#javascript

日志专栏收录该内容

51 篇文章

订阅专栏

本文深入解析跨域问题的成因及解决策略，涵盖CORS、JSONP等主流跨域技术，探讨前后端如何协同实现跨域请求，确保数据安全高效传输。

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

跨域的理论基础：

首先清楚什么是跨域？
跨域是指一个域下的文档或者脚本加载或者请求另一个域的资源，包括脚本请求，资源加载，链接跳转…我们通常所谓的跨域问题是指浏览器由于同源策略所造成的不能请求到另一个域下的数据或者资源…

如何解决跨域问题？

在后台设置响应头，允许跨域
header(‘Access-Control-Allow-Origin:*’);//允许所有来源访问–>允许所有的语言对我这个语言发起请求
如果你想指定一个具体的语言的话, 把 * 换成请求过来的协议+主机名+端口号
header(‘Access-Control-Allow-Method:POST,GET’);//允许访问的方式

jsonp

jsonp 全称是JSON with Padding,是为了解决跨域请求资源而产生的解决方案,是一种依靠开发人员创造出的一种非官方跨域数据交互协议，Jsonp需要后端做额外的支持。
区别：json是描述信息的格式，jsonp是信息传递双方约定的方法。

当下最流行的跨域的解决方案CORS?
下文来自 dodo

CORS
当下最流行的跨域解决方案，也是很方便的一种方案，前端用普通的ajax或者fetch或者其他的方式都可以。
只需要在后端的代码里加一行相应头的设置就好了，而前端不需要修改。

exports.getAge = ctx => {
  const data = { age: 24 }
  ctx.set('Access-Control-Allow-Origin', '*')
  ctx.body = data
}

这样返回的数据就可以到达浏览器，被浏览器所接受。
携带cookie需要前后端一起调整。
后端允许cookie起作用

ctx.set('Access-Control-Allow-Credentials', 'true')

前端允许携带cookie

xhr.withCredentials = true

cors可以支持预检，从而任何类型的请求都能支持，不只是get，cors还有一些额外的配置，用于访问控制，比如Access-Control-Allow-Headers，用于那些请求头可以起作用。