面试题：什么是跨域？在 Vue 项目中你是如何解决跨域问题的？

什么是跨域？

跨域（Cross-Origin）是指浏览器出于安全考虑，限制了从一个源（协议 + 域名 + 端口）向另一个源发起的请求。如果两个 URL 的协议、域名或端口有任何不同，就会产生跨域问题。

同源策略（Same-Origin Policy）

浏览器默认遵循同源策略，即：

允许同源请求（协议、域名、端口完全相同）。
限制跨域请求（协议、域名、端口任意一个不同）。

跨域的表现

前端表现：浏览器控制台会报错，如 Access to XMLHttpRequest at 'http://example.com' from origin 'http://localhost:8080' has been blocked by CORS policy。
后端表现：如果服务器未正确配置 CORS，请求会被拒绝。

在 Vue 项目中如何解决跨域问题？

1. 开发环境解决跨域

在开发环境中，可以通过 Vue CLI 提供的 代理服务器 来解决跨域问题。

配置 `vue.config.js`

在 vue.config.js 中配置 devServer.proxy：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://example.com', // 目标服务器地址
        changeOrigin: true, // 允许跨域
        pathRewrite: {
          '^/api': '' // 重写路径（可选）
        }
      }
    }
  }
};

使用示例

前端请求：/api/user
代理后实际请求：http://example.com/user

优点

仅用于开发环境，无需修改后端代码。
配置简单，适合快速解决开发阶段的跨域问题。

2. 生产环境解决跨域

在生产环境中，通常需要通过后端服务器或服务器配置来解决跨域问题。

方法 1：后端配置 CORS

后端服务器需要设置响应头，允许跨域请求。

示例（Node.js + Express）

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

app.use((req, res, next) => {
  res.header('Access-Control-Allow-Origin', '*'); // 允许所有域名访问
  res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE'); // 允许的请求方法
  res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization'); // 允许的请求头
  next();
});

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

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

方法 2：Nginx 反向代理

通过 Nginx 配置反向代理，将前端请求转发到后端服务器。

示例 Nginx 配置

server {
  listen 80;
  server_name yourdomain.com;

  location /api {
    proxy_pass http://backend-server; # 后端服务器地址
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }

  location / {
    root /path/to/your/frontend;
    try_files $uri /index.html;
  }
}

方法 3：JSONP（仅限 GET 请求）

JSONP 是一种利用 <script> 标签不受同源策略限制的特性来实现跨域请求的方式。

前端代码

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

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

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

后端代码（Node.js）

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

app.get('/api/data', (req, res) => {
  const callback = req.query.callback;
  const data = JSON.stringify({ message: 'Hello, world!' });
  res.send(`${callback}(${data})`);
});

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

方法 4：WebSocket

WebSocket 不受同源策略限制，可以用于跨域通信。

3. 其他解决方案

后端代理：在前端服务器（如 Node.js）中设置代理，将请求转发到后端服务器。
浏览器禁用安全策略：仅用于开发调试，不推荐生产环境使用。
Chrome 启动参数：--disable-web-security

总结

跨域：由于浏览器的同源策略，不同源的请求会被限制。
解决方案：
- 开发环境：使用 Vue CLI 的代理配置。
- 生产环境：后端配置 CORS、Nginx 反向代理、JSONP 或 WebSocket。
推荐方式：
- 开发环境：代理服务器。
- 生产环境：后端配置 CORS 或 Nginx 反向代理。