什么是跨域以及怎么处理跨域问题

什么是跨域？

跨域（Cross-Origin）指的是在浏览器的同源策略下，不同源（Origin）之间进行资源请求时出现的安全限制。同源策略要求网页中的资源请求（比如 AJAX 请求、图片、脚本等）必须来自相同的协议、域名和端口，否则浏览器会阻止跨域的请求。同源策略的目的是为了保护用户的隐私和安全。
在 Vue 3 项目中处理跨域通常需要配置代理和使用 CORS（跨域资源共享）等技术。通过配置开发服务器代理，将前端的请求代理到后端，从而避免跨域问题。

跨域问题常见场景

• 不同域名之间的请求： 比如前端代码部署在 http://example.com，而请求后端接口在 http://api.example.com。
• 不同子域之间的请求： 比如前端代码部署在 http://www.example.com，而请求后端接口在 http://api.example.com。
• 不同协议之间的请求： 比如前端代码部署在 https://example.com，而请求后端接口在 http://api.example.com。
• 不同端口之间的请求： 比如前端代码部署在 http://example.com，而请求后端接口在 http://example.com:8080。

怎么处理跨域

1、配置代理

在 Vue 3 项目中处理跨域经常通过配置开发服务器代理，将前端的请求代理到后端，从而避免跨域问题。
创建 vue.config.js 文件（如果项目中没有），并添加以下内容：

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://api.example.com', // 后端服务地址
        changeOrigin: true, // 开启跨域
        pathRewrite: {
          '^/api': '', // 将请求路径中的 '/api' 移除
        },
      },
    },
  },
};

上述示例中，我们配置了一个代理，将以 /api 开头的请求代理到 http://api.example.com 主机。这样，当你在前端代码中发起请求时，只需使用 /api 开头的路径，而不用担心跨域问题。

2、CORS（跨域资源共享）

确保后端服务正确配置了 CORS。在后端的响应中添加跨域响应头：

// Express.js 例子
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');
  next();
});
// 其他路由和中间件处理

3、JSONP（仅限 GET 请求）

对于只支持 GET 请求的情况，你可以考虑使用 JSONP。Vue 3 本身不直接支持 JSONP，但可以使用第三方库或手动实现 JSONP 请求。

// 使用 JSONP 请求
const script = document.createElement('script');
script.src = 'http://api.example.com/data?callback=handleData';

// 在全局定义回调函数
window.handleData = function(data) {
  // 处理返回的数据
};
// 将脚本添加到文档中
document.body.appendChild(script);

请注意，JSONP 有一些安全性和限制，应慎重使用。

4、使用 WebSocket

• 在某些情况下，可以考虑使用 WebSocket 进行通信。WebSocket 不受同源策略限制。

注意事项：

• 在生产环境中，代理配置仅在开发服务器中有效，因为在生产环境中，前端代码通常会被打包并与后端服务一起部署。
• 根据实际后端服务配置修改 target 的值和其他代理配置项。