为什么会有跨域问题？怎么解决跨域？

跨域问题是出于浏览器的同源策略限制。同源策略是一种安全机制，它限制了网页上的 JavaScript 代码访问不同源的资源。同源指的是协议、域名和端口都相同。如果其中有任何一个不同，就视为跨域。

例如，http://a.com 和 http://b.com 是跨域的，http://a.com:8080 和 http://a.com:8081 也是跨域的，http://a.com 和 https://a.com 也是跨域的。

跨域问题的存在是为了防止恶意网站窃取用户信息。假设你登录了网银 a.com，如果另一个网站 b.com 可以随意访问 a.com 的资源，那么 b.com 就可以窃取你的账户信息。

解决跨域问题的方法有很多，常见的有以下几种：

1. JSONP (JSON with Padding):

原理: 利用 <script> 标签不受同源策略限制的特点，通过动态创建 <script> 标签，将回调函数名作为参数传递给服务器。服务器返回一段 JavaScript 代码，其中包含回调函数的调用，并将数据作为参数传递给回调函数。
适用场景: 只支持 GET 请求，适用于老旧浏览器或特殊场景。
缺点: 不安全，只支持 GET 请求。
示例:

function jsonp(url, callback) {
  const script = document.createElement('script');
  script.src = url + '?callback=' + callback;
  document.body.appendChild(script);
}

jsonp('http://b.com/data', 'handleData');

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

2. CORS (Cross-Origin Resource Sharing):

原理: 服务器端设置 Access-Control-Allow-Origin 等响应头，允许客户端跨域访问资源。
适用场景: 各种 HTTP 请求，现代浏览器都支持。
优点: 安全，灵活，支持各种 HTTP 请求。
缺点: 需要服务器端配合。
示例 (服务器端 - Node.js with Express):

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', 'http://a.com'); // 允许来自 a.com 的请求
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE'); // 允许的请求方法
  res.header('Access-Control-Allow-Headers', 'Content-Type'); // 允许的请求头
  res.header('Access-Control-Allow-Credentials', true); // 允许携带 Cookie
  next();
});

3. 代理服务器:

原理: 通过代理服务器转发请求，避免浏览器直接向跨域服务器发送请求。
适用场景: 不需要服务器端配合，可以绕过 CORS 限制。
优点: 配置简单，灵活。
缺点: 增加了一次转发，可能会影响性能。
示例 (前端 - Vue.js with vue.config.js):

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://b.com',
        changeOrigin: true, // 必须设置为 true
        pathRewrite: {
          '^/api': '', // 将 /api 重写为空
        },
      },
    },
  },
};