前言
在前端开发过程中，经常会涉及到跨域问题。由于浏览器的同源策略限制，无法直接访问其他域名下的资源。本文将介绍跨域问题的原因，以及常见的跨域解决方案。
什么是跨域问题
同源策略是浏览器的一种安全机制，用于阻止一个域下的文档或脚本加载或访问另一个域的资源。同源策略要求访问的域、协议和端口都必须相同，否则就会发生跨域问题。
例如，如果我们的网站运行在 http://example.com 上，那么通过 JavaScript 请求 http://test.com 下的资源就会触发跨域问题。
跨域解决方案
1. JSONP
JSONP（JSON with Padding）是一种常用的跨域解决方案。它利用了 <script> 标签没有跨域限制的特性来实现跨域请求。在前端代码中，我们创建一个 <script> 标签，并将跨域的 URL 作为 src 属性值，服务器响应返回的是一段包裹在函数调用中的 JSON 数据。
function handleResponse(data) {
// 处理返回的数据
}
const script = document.createElement('script');
script.src = 'http://test.com/api?callback=handleResponse';
document.body.appendChild(script);
服务器返回的数据如下：
handleResponse({"name": "example", "age": 28});
缺点：只支持 GET 请求，并且无法处理错误。
2. CORS
CORS（Cross-Origin Resource Sharing）是一种官方推荐的跨域解决方案。它在请求和响应的头信息中添加一些标识，服务器通过这些标识来判断是否允许跨域访问。
在前端代码中，我们可以通过设置 XMLHttpRequest 对象的 withCredentials 属性为 true，请求时直接发送跨域请求。服务器端需要设置响应头信息，示例如下：
const xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.open('GET', 'http://test.com/api');
xhr.onload = function() {
// 处理返回的数据
};
xhr.send();
在服务器端的响应头中设置允许跨域的域名，示例如下（PHP 代码）：
header('Access-Control-Allow-Origin: http://example.com');
header('Access-Control-Allow-Credentials: true');
CORS 的优点是支持各种 HTTP 请求，包括 GET、POST 等，并且能够处理错误。
3. 代理服务器
代理服务器是一种常见的跨域解决方案，它将跨域请求转发到本地服务器，再由本地服务器转发请求到目标服务器。这样在前端代码中只需要与本地服务器通信，而不会发生跨域问题。
例如，在前端代码中请求 http://localhost:3000/api，然后在本地服务器上设置代理将请求转发到 http://test.com/api。这样就避免了跨域问题。
代理服务器的优点是不需要在前端和服务器端做过多的修改，适用于开发环境。
结语
本文介绍了前端跨域问题的原因，并提供了常见的跨域解决方案。根据实际需求和开发环境的不同，选择合适的解决方案来解决跨域问题。希望本文对你理解前端跨域问题有所帮助。
本文来自极简博客，作者：热血战士喵，转载请注明原文链接：前端跨域问题与解决方案
