关于跨域后端解决跨域问题

article/2025/10/3 15:42:22

一、为什么会有跨域

出于浏览器的同源策略限制。**同源策略（Sameoriginpolicy）**是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源（即指在同一个域）就是两个页面具有相同的协议（protocol），主机（host）和端口号（port）
2.同源策略是浏览器为了安全起见而设定，那么如果没有同源策略会发生什么事呢？
情景一：泄露信息，我登陆了淘宝，然后又登陆了一个恶意网站，恶意网站发送AJAX请求获取淘宝的信息接口，而这个时候我已经登陆过淘宝，所以浏览器附带了我个人的淘宝cookie，一起发送给恶意网站；
情景二：盗取数据，某网站花重金购买一部电影的播放权，我找到该网站接口后，直接把这部电影拿到手，然后搞到自己的网站上去播放；
由此可见，为了安全起见的同源策略是必不可少了，但同时也给ajax请求带来了很大的麻烦，比如大型网站不可能把整个网站的所有资源都放在同一个服务器上，这时候跨域就成了必不可少的技能；

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域。
在这里插入图片描述

二、解决跨域的几种方法

1、CORS
CROS全称Cross-Origin Resource Sharing（跨域资源共享），它是一个W3C标准，支持使用AJAX向跨域服务器发出AJAX请求；
原理：同源策略好比一个黑名单，这个黑名单非常严格，把所有的不同源客户端脚本都进行了限制访问，而CORS则是一个白名单，可以将允许访问的客户端脚本添加进这个白名单中，使其能进行访问。

实现方式

CORS通信的实现只能依赖跨域服务器的支持，而在本域下的的代码只是普通的AJAX请求；
通过在跨域服务器中对回应头进行设置，实现对指定的域进行数据交互，如下代码是对回应头进行的设置header(“Access-Control-Allow-Origin”, “a.oxc.com”)。这个代码实现了a.oxc.com这个域名对其数据的访问。

跨域服务器：添加回应头信息：header('Access-Control-Allow-Origin', '允许跨域进行访问的域名')
PS：这个回应头信息中Access-Control-Allow-Origin是允许跨域访问，而后面的域名是允许进行跨域访问的域名，如果第二个参数是一个星号*，就是无限制，所有的域都可以对其进行跨域访问；
response设置说明：


// 允许跨域访问的域名：若有端口需写全（协议+域名+端口），若没有端口末尾不用加'/'
response.setHeader("Access-Control-Allow-Origin", "*");
//* 代办允许所有方法
response.setHeader("Access-Control-Allow-Methods", "*");
// Access-Control-Max-Age 用于 CORS 相关配置的缓存
response.setHeader("Access-Control-Max-Age", "3600");
// 提示OPTIONS预检时，后端需要设置的两个常用自定义头
response.setHeader("Access-Control-Allow-Headers", "*");
// 允许前端带认证cookie：启用此项后，上面的域名不能为'*'，必须指定具体的域名，否则浏览器会提示
response.setHeader("Access-Control-Allow-Credentials", "true");

本域分两种情况：
已经被允许跨域访问：
在回应头处出现一个键值对，如：Access-Control-Allow-Origin: http://a.com:8080；
未允许进行跨域访问：
①：可能是跨域服务器不支持CORS跨域访问，那么就不会有类似：Access-Control-Allow-Origin: http://a.com:8080的回应头信息；
②：跨域服务器不支持本域进行访问，也会有回应头信息，该信息标注那些域是可以进行访问的，比如：跨域服务器支持a.com进行访问，而我用b.com对其进行访问，回应头就会回复：Access-Control-Allow-Origin: http://a.com:8080字段，表明只有a.com是支持访问的；
出现如下错误：
在这里插入图片描述
2.JSONP
JSONP 是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，兼容性好（兼容低版本IE）。
是利用script标签本身可跨域，并且可以将其src属性里的资源下载下来的设定从而达成目的。
本域部分：
1.首先动态创建script标签；
2.创建回调函数callback（假定函数名为aaa），然后将该函数与callback字段结合成键值对的形式，例如：callback=aaa，接着将其与远端(不同源)的接口url结合成如下形式：
http…php?callback=aaa
3.将创建的script标签的src引向结合后的接口http…php?callback=aaa即可；
跨域服务器部分：
1.获取到回调函数aaa后，把需要发送的数据与函数aaa进行包装，使用字符串拼接的方式组成如下形式再发回给本域：
aaa({“name”: “xiaoming”, “age”: “1000”});
这时候数据就已经到手了
最后：
浏览器会调用函数aaa，把获得的数据以参数形式传递进去，进行数据处理；
PS：由上述步骤可见，jsonp的使用是需要远端支持的。

缺陷：
1.因为src属性自己获取数据要在url后面加上数据参数，这个方式就只有get，所以jsonp也只能用get方式获取数据；
2.jsonp只能解决跨域获取资源问题，但是不能解决不同域页面之间的JS调用问题；
3.安全性问题：如果提供jsonp的远端存在注入漏洞，它返回的数据就有可能是被人操控的。那么调用过这个远端接口的所有网页就都有可能被操控；
4.jsonp调用失败不会返回失败的http状态码，有可能会是200OK；

3.websocket
Websocket 是 HTML5 的一个持久化的协议，它实现了浏览器与服务器的全双工通信，同时也是跨域的一种解决方案。WebSocket 和 HTTP 都是应用层协议，都基于 TCP 协议。但是 WebSocket 是一种双向通信协议，在建立连接之后，WebSocket 的服务器与客户端都能主动向对方发送或接收数据。同时，WebSocket 在建立连接时需要借助 HTTP 协议，连接建立好了之后 client 与 server 之间的双向通信就与 HTTP 无关了。

有不足的请大家多多指教······