在前端开发中，跨域请求是一个常见的问题，特别是当我们需要从一个域名去获取另一个域名的数据时。由于浏览器的同源策略，跨域请求会受到限制，而JavaScript是运行在浏览器中的，所以必须使用一些解决方案来克服这个问题。
什么是跨域请求
跨域请求是指在一个网页的代码中，使用JavaScript发送请求到另一个域名下的接口或资源。举个例子，如果你的网页是通过www.example.com加载的，而你想要获取www.api.com下的数据，这就是一个跨域请求。
同源策略
同源策略是一种安全机制，用于限制一个网页从另一个源加载或者操作资源的能力。它要求在同一个源下的页面之间共享资源和数据时遵循一些限制，而跨域请求则被视为一种安全隐患而受到限制。
同源策略主要限制以下几个方面：
- Cookie、LocalStorage和IndexDB等存储的读取
- DOM的访问
- AJAX请求的发送
跨域请求解决方案
虽然浏览器的同源策略会限制跨域请求，但我们仍然可以使用一些方法来绕过这个限制。
1. JSONP
JSONP（JSON with Padding）是一种实现跨域请求的方法，它通过动态插入一个<script>标签来加载外部资源，并将响应数据作为参数传入一个回调函数中。
例如：
function handleResponse(data) {
// 处理响应数据
}
const script = document.createElement('script');
script.src = 'http://www.api.com/data?callback=handleResponse';
document.body.appendChild(script);
在这个例子中，我们通过向<script>标签的src属性添加一个callback参数来指定要执行的回调函数。当外部资源返回数据时，会自动执行这个回调函数，并将数据作为参数传入。
2. CORS
CORS（Cross-Origin Resource Sharing）是一种在浏览器和服务器之间进行跨域请求的机制，它通过在请求头中添加一些额外的信息来告诉浏览器该请求是被允许的。
对于使用CORS的跨域请求，需要服务器在响应中添加一些特定的HTTP头：
Access-Control-Allow-Origin: http://www.example.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: Content-Type
Access-Control-Allow-Credentials: true
在客户端代码中，可以使用XMLHttpRequest或Fetch API来发送CORS请求：
const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.api.com/data', true);
xhr.withCredentials = true; // 允许发送包含凭据的请求
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
// 处理响应数据
}
}
xhr.send();
在这个例子中，通过设置xhr.withCredentials为true，允许发送包含凭据的请求，以便服务器能够验证请求是否被授权。
3. 代理服务器
另一个解决跨域请求的方法是使用代理服务器。通过在自己的服务器上建立一个中间层，将浏览器发送的请求转发到目标服务器，并将响应返回给浏览器，达到绕过跨域限制的目的。
例如，我们可以在自己的服务器上创建一个/data的接口，并让服务器在后台向目标服务器的/data接口发送请求并将响应返回给浏览器：
app.get('/data', (req, res) => {
axios.get('http://www.api.com/data', {
headers: {
'Access-Control-Allow-Origin': '*'
}
})
.then((response) => {
res.json(response.data);
})
.catch((error) => {
res.status(500).json(error);
});
});
在客户端代码中，只需要发送请求到自己的服务器即可：
fetch('/data')
.then(response => response.json())
.then(data => {
// 处理响应数据
})
.catch(error => console.error(error));
通过使用代理服务器，我们可以避免直接发送跨域请求，从而绕过了浏览器的同源策略限制。
小结
跨域请求是前端开发中常见的问题，但我们可以使用一些解决方案来绕过浏览器的同源策略限制。JSONP、CORS和代理服务器都是常用的跨域请求解决方案，我们可以根据具体的情况选择合适的方法来解决跨域请求的问题。
注意：本文归作者所有，未经作者允许，不得转载
