服务器端跨域是如何工作的？

服务器端跨域

什么是跨域

在Web开发中，跨域是指一个网页中的JavaScript代码试图访问不同域名下的资源时，由于浏览器的同源策略限制，导致请求被阻止的现象，同源策略是浏览器为了保护用户数据安全而采取的一种措施，它要求JavaScript代码只能访问与当前页面同源（即域名、协议和端口号都相同）的资源。

为什么需要服务器端跨域

当一个网站需要调用另一个网站的API接口时，如果两个网站域名不同，那么就会出现跨域问题，为了解决这个问题，需要在服务器端进行跨域处理，服务器端跨域是指服务器允许来自其他域名的请求访问自己的资源，从而实现跨域访问。

如何实现服务器端跨域

实现服务器端跨域的方法主要有两种：CORS（CrossOrigin Resource Sharing，跨域资源共享）和JSONP（JSON with Padding）。

CORS

CORS是一种W3C标准，它允许服务器通过设置HTTP响应头来告诉浏览器哪些来源的请求可以访问其资源，具体实现方法如下：

1、在服务器端的响应头中添加AccessControlAllowOrigin字段，指定允许访问的域名。

AccessControlAllowOrigin: http://example.com

2、如果需要允许所有域名访问，可以将AccessControlAllowOrigin设置为：

AccessControlAllowOrigin:

3、对于需要携带cookie的请求，还需要设置AccessControlAllowCredentials为true：

AccessControlAllowCredentials: true

4、对于预检请求（Preflight Request），服务器需要设置以下响应头：

AccessControlAllowMethods: GET, POST, PUT, DELETE, OPTIONS
AccessControlAllowHeaders: ContentType, Authorization

JSONP

JSONP是一种非官方的跨域解决方案，它利用了<script>标签不受同源策略限制的特点，具体实现方法如下：

1、在客户端创建一个全局函数，用于接收服务器返回的数据。

function handleResponse(data) {
  console.log(data);
}

2、将请求参数拼接到URL中，并使用<script>标签发起请求。

<script src="http://api.example.com/data?callback=handleResponse"></script>

3、服务器端根据请求参数生成JSONP格式的数据，并在响应中返回。

handleResponse({"name": "张三", "age": 30});

需要注意的是，JSONP只支持GET请求，且存在安全隐患，因此在实际项目中较少使用。

服务器端跨域是为了解决浏览器同源策略限制导致的跨域问题，实现服务器端跨域的方法主要有CORS和JSONP两种，其中CORS是推荐的解决方案。