【系统设计】跨域问题以及解决方法

什么是跨域问题

跨域问题是指在浏览器中运行的Web应用程序尝试通过XMLHttpRequest或Fetch API等方式向不同源（即域名、协议或端口不同）的服务器发送请求时，浏览器会根据同源策略阻止这种行为。同源策略是一种重要的安全机制，旨在限制来自不同源的页面对当前页面的访问，从而防止恶意网站通过跨域请求窃取用户个人信息或执行未经授权的操作。
根据同源策略，请求的协议、域名和端口号必须完全一致，才被视为同源。如果协议、域名或端口号中任何一项与当前页面的协议、域名或端口号不一致，浏览器就会阻止该请求。在这种情况下，浏览器会抛出跨域错误，导致请求失败。
需要注意的是，跨域问题本质上是浏览器的安全行为。实际上，我们发出的请求已经成功到达服务器，但当服务器返回数据时，浏览器会基于同源策略进行限制，从而阻止数据的正常传输。

如何解决？

一、JSONP（JSON with Padding）：
JSONP 是一种利用 script 标签跨域特性的技术。它通过动态创建 script 标签，并将其 src 属性设置为跨域服务器的 URL 来实现跨域通信。服务器返回的响应数据需要以特定的格式封装，并通过客户端预先定义的回调函数传递给页面。
这种方法巧妙地绕过了浏览器的同源策略限制，因为 script 标签的 src 属性可以加载来自不同源的资源，而浏览器不会阻止这种行为。

客户端代码：

function handleResponse(response) {
  //处理服务器返回的数据
}

var script = document.createElement('script');
script.src = 'https://jsonp.com/data?callback=handleResponse';
document.body.appendChild(script);

服务端代码：

var data = { name: 'Tom', age: 24 };
var jsonpResponse = 'handleResponse(' + JSON.stringify(data) + ');';
res.send(jsonpResponse);

关于 JSONP 的补充说明：

• 仅支持 GET 请求
  JSONP 仅支持 HTTP 的 GET 请求，无法实现 POST 或其他方法。这是因为 JSONP 的实现依赖于动态创建 script 标签，而 script 标签的 src 属性仅支持通过 GET 请求加载资源。因此，JSONP 无法用于需要提交复杂数据的场景。

• 数据格式要求
  JSONP 的实现依赖于服务器返回的数据必须是 JSONP 格式，而不是普通的 JSON 格式。JSONP 格式的数据是一个 JavaScript 函数调用，形如 callbackFunction(data)。如果服务器返回的是普通 JSON 数据（如 {key: value}），在客户端解析时会引发语法错误，因为浏览器会尝试将返回内容作为 JavaScript 代码执行。

• 请求头与响应头的限制
  由于 JSONP 是通过 script 标签实现的，它无法像 XMLHttpRequest 或 Fetch API 那样在请求中设置自定义请求头（例如 Content-Type），也无法获取响应头（例如 Cookie）。这种限制使得 JSONP 在安全性、灵活性和功能上不如现代的跨域解决方案（如 CORS）。这也是 JSONP 在现代开发中逐渐被替代的重要原因之一。

二、CORS（跨域资源共享）：
CORS 是一种现代的跨域解决方案，通过在服务器端设置特定的响应头来允许跨域请求。其核心机制是服务器通过响应头 Access-Control-Allow-Origin 指定允许访问资源的来源域名，从而实现跨域请求的许可。
与 JSONP 不同，CORS 支持各种 HTTP 请求方法（如 GET、POST、PUT、DELETE 等），并且能够灵活处理请求头和响应头，例如 Content-Type 和 Authorization 等。这使得 CORS 在功能和安全性上都远优于 JSONP，成为现代 Web 开发中首选的跨域解决方案。

客户端代码：

fetch('http://CORS.com/api/data', {
  method: 'GET',
  headers: {
    'Content-Type': 'application/json',
  },
  mode: 'cors',
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error))

服务端代码：

const express = require('express');
const app = express();

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

app.get('/api/data', (req, res) => {
  const data = { message: 'Hello, World!' };
  res.json(data);
});

app.listen(3000, () => {
  console.log('Server listening on port 3000');
});

优点

• 安全性高
  CORS 是一种基于 HTTP 响应头的安全机制，通过明确指定允许的来源（Access-Control-Allow-Origin）、请求方法（Access-Control-Allow-Methods）和请求头（Access-Control-Allow-Headers），可以有效限制跨域请求的范围和类型，从而防止恶意攻击。这种细粒度的控制使得 CORS 成为一种安全可靠的跨域解决方案。

• 灵活性强
  CORS 支持多种 HTTP 请求方法（如 GET、POST、PUT、DELETE 等），并允许传输不同类型的数据格式（如 JSON、XML、Form 等）。这种灵活性使得 CORS 能够适应各种复杂的跨域场景，满足现代 Web 应用的需求。

• 使用方便
  CORS 的实现仅需在服务器端配置相应的响应头，客户端无需额外处理即可完成跨域请求。这种简洁的实现方式使得 CORS 在开发和部署过程中更加高效，减少了开发成本。
  与现代 Web 标准兼容
  CORS 是 W3C 的标准解决方案，与现代 Web 开发的其他技术（如 Fetch API、XMLHttpRequest 等）无缝集成，能够充分利用现代浏览器的功能。

不足

• 兼容性问题
  CORS 在某些旧版浏览器中可能不被支持或支持不完全。例如，IE 8 和 IE 9 需要通过 XDomainRequest 来实现类似的功能，这增加了开发的复杂性。开发者可能需要为这些浏览器提供额外的兼容性处理。
• 预检请求的额外消耗
  对于一些复杂的请求（如带有自定义请求头的 POST 请求），浏览器会先发送一个 OPTIONS 请求（预检请求），以确认服务器是否允许该跨域请求。这会增加一次额外的网络请求，导致请求时间延长和带宽消耗增加。
• CSRF 攻击风险
  尽管 CORS 本身是安全的，但它并不能完全防止 CSRF（跨站请求伪造）攻击。如果服务器允许跨域请求，攻击者可能会利用用户的认证信息（如 Cookie）发起恶意请求。因此，在使用 CORS 时，需要结合其他安全机制（如 Token 验证、请求头校验等）来确保请求的合法性。
• 服务器端配置复杂性
  CORS 的实现依赖于服务器端的正确配置。如果服务器端的响应头设置不当，可能会导致跨域请求失败。此外，对于复杂的跨域场景（如动态域名、多级等代理），服务器端的配置可能变得复杂且难以维护。

三、代理服务器
在同源策略的限制下，代理服务器提供了一种间接实现跨域请求的有效方式。通过在同域名下的服务器上设置代理服务器，客户端的请求可以被转发到目标服务器，而目标服务器的响应则通过代理服务器返回给客户端。这样一来，客户端只需要与代理服务器进行通信，而无需直接与目标服务器交互，从而巧妙地绕过了浏览器的跨域限制。

示例一：
需求：使用 axios 接收 server1.js 的服务。
实现代码：
App.vue

<template>
	<div>
		<button @click="getStudents">获取信息</button>
	</div>
</template>

<script>
        import axios from 'axios'
	export default {
		name:'App',
		methods:{
			getStudents(){
				//注意：开启代理服务器后，get 中的端口号要改为前端所在的端口号，即8080
				axios.get('http://localhost:8080/students').then(
					response => {
						console.log('请求成功',response.data)
					},
					error => {
						console.log('请求失败',error.message)
					}
				)
			},
		},
	}
</script>

vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  // 关闭语法检查
  lintOnSave: false,
  // 开启代理服务器，注意：这里的端口号写后端的端口号
  devServer: {
    proxy: 'http://localhost:5000'
  },
})

示例二：
需求：使用 axios 接收 server1.js 和 server2.js 的服务
实现代码：
App.vue

<template>
	<div>
		<button @click="getStudents">获取学生信息</button>
		<button @click="getCars">获取汽车信息</button>
	</div>
</template>

<script>
        import axios from 'axios'
	export default {
		name:'App',
		methods:{
			getStudents(){
				axios.get('http://localhost:8080/atguigu/students').then(
					response => {
						console.log('请求成功了',response.data)
					},
					error => {
						console.log('请求失败了',error.message)
					}
				)
			},
			getCars(){
				axios.get('http://localhost:8080/demo/cars').then(
					response => {
						console.log('请求成功了',response.data)
					},
					error => {
						console.log('请求失败了',error.message)
					}
				)
			},
		},
	}
</script>

vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  lintOnSave: false,

  // 开启代理服务器
  devServer: {
    proxy: {
      '/atguigu': {
        target: 'http://localhost:5000',
        pathRewrite: {'^/atguigu':''}, 
        ws: true,
        changeOrigin: true
      },
      '/demo': {
        target: 'http://localhost:5001',
        pathRewrite: {'^/demo':''}, 
        ws: true,
        changeOrigin: true
      },
    }
  }
})

四、WebSocket
WebSocket 是一种基于 TCP 协议的全双工通信协议，允许客户端与服务器之间建立持久连接，并实现实时、双向的数据传输。与传统的 HTTP 请求不同，WebSocket 不受浏览器同源策略的限制。一旦连接建立，客户端和服务器可以自由地交换数据，而无需考虑域名、协议或端口的差异。因此，WebSocket 是一种高效且灵活的跨域通信解决方案，特别适用于需要实时交互的应用场景，如在线聊天、实时数据推送等。

总结

跨域问题是 Web 开发中常见的挑战之一。当页面上的 JavaScript 代码尝试通过 XMLHttpRequest 或 Fetch API 向不同域名、协议或端口的服务器发送请求时，浏览器会根据同源策略（Same-Origin Policy）阻止这种行为。
同源策略是一种重要的安全机制，但它也限制了跨域数据通信的可能性。幸运的是，开发者可以通过多种方法解决跨域问题。常用的解决方案包括 JSONP、CORS、代理服务器以及 WebSocket 等。每种方法都有其独特的优势和适用场景：

• JSONP：适用于简单的 GET 请求，但安全性较低且功能有限。
• CORS：现代、灵活且安全的解决方案，适用于大多数跨域场景。
• 代理服务器：适用于需要额外安全控制或目标服务器不支持 CORS 的场景。
• WebSocket：适用于需要实时双向通信的场景，不受同源策略限制。

选择合适的解决方案应根据项目需求、后端服务的支持情况以及开发团队的技术栈来决定。通过正确选择跨域解决方案，不仅可以确保数据通信的安全性和稳定性，还能提高开发效率和用户体验。跨域问题在 Web 开发中至关重要，了解并掌握这些解决方案对于前端开发者来说意义重大。