一、从跨域谈起
1、什么是跨域
跨域是指浏览器从一个域名的网页去请求另一个域名的资源。这里的域名包括协议、主机名、端口号等部分，
只要有任何一个部分不同，就被视为不同的域。例如，http://www.example.com和https://www.example.com
（协议不同）、http://www.example.com和http://api.example.com（主机名不同）、http://www.example.
com:8080和http://www.example.com:80（端口号不同）都属于不同的域。
当存在跨域情况时，由于浏览器的同源策略限制，会出现一些访问限制。同源策略是一种安全机制，它限制了
从同一个源加载的文档或脚本如何与来自另外一个源的资源进行交互。这有助于防止恶意网站窃取用户信息或执行
其他有害操作。如果没有同源策略，恶意网站可能会通过脚本访问用户在其他网站上的敏感信息，如登录凭证、个
人数据等。
然而，在实际开发中，经常会有跨域访问资源的需求，比如前端页面需要从不同域名的后端服务器获取数据。
为了实现跨域访问，通常会采用一些技术手段，如JSONP、CORS（跨域资源共享）、代理服务器等。这些技术通过
不同的方式来绕过或修改浏览器的同源策略限制，以实现安全的跨域数据交互。
2、常见的解决跨域问题的方法
1> JOSNP(JOSN with Padding)
JOSNP是一种古老的跨域解决方案，它利用过了<script>标签的src属性不受同源策略限制的特点。服务器返回的
是一个JSON数据，并将其包装在一个回调函数中。前端页面定义好回调函数，然后通过动态创建<script>标签来
请求服务器数据。服务器返回的数据会触发回调函数，从而获取到数据。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JSONP Example</title>
</head>
<body>
<script>
function handleResponse(data) {
console.log('Received data:', data);
}
const script = document.createElement('script');
script.src = 'http://example.com/api/data?callback=handleResponse';
document.body.appendChild(script);
</script>
</body>
</html>
2> CORS（跨域资源共享）
CORS是现代浏览器支持的跨域解决方案，它是一种跨域资源共享机制，允许服务器在响应头中声明哪些可以访问该
资源。服务器端需要设置响应头，告诉浏览器允许哪些域名、方法和请求头进行跨域访问。
from flask import Flask
from flask_cors import CORS
app = Flask(__name__)
CORS(app)
@app.route('/data')
def get_data():
return {'message': 'This is cross - origin data'}
if __name__ == '__main__':
app.run(debug=True)
3> 代理服务器
代理服务器是一种常用的跨域解决方案，它在同源的服务器上设置一个代理，将前端的请求转发到目标服务器，然
后将目标服务器的响应返回给前端。这样前端就相当于在同源的服务器上进行请求，避免了跨域问题。
const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
const app = express();
app.use('/api', createProxyMiddleware({
target: 'http://example.com',
changeOrigin: true,
pathRewrite: { '^/api': '' }
}));
const port = 3000;
app.listen(port, () => {
console.log(`Server running on port ${port}`);
});
