请求方法是GET、POST或HEAD
请求头只包含以下字段：Accept、Accept-Language、Content-Language、Content-Type（限于application/x-www-form-urlencoded、multipart/form-data、text/plain）
没有自定义请求头

简单请求的处理流程：

浏览器发送请求，包含Origin头部（表示请求来自哪个源）
服务器检查Origin，如果允许跨域，则在响应头中添加Access-Control-Allow-Origin等字段
浏览器检查响应头，如果有允许跨域的相关字段，则允许请求，否则拒绝

非简单请求

非简单请求是指不满足简单请求条件的请求，如使用PUT、DELETE方法，或自定义请求头等。

非简单请求的处理流程：

浏览器发送预检请求（OPTIONS请求），包含Origin、Access-Control-Request-Method、Access-Control-Request-Headers等头部
服务器响应预检请求，包含Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers等头部
浏览器检查预检响应，如果允许跨域，则发送实际请求；否则，拒绝请求

常见CORS响应头

Access-Control-Allow-Origin：允许的源，可以是具体域名或*（表示允许所有源）
Access-Control-Allow-Methods：允许的请求方法
Access-Control-Allow-Headers：允许的请求头
Access-Control-Allow-Credentials：是否允许发送Cookie
Access-Control-Max-Age：预检请求的有效期（秒）

跨域解决方案

后端解决方案

设置CORS头部

在服务器端设置CORS相关响应头是最直接的解决方案。以下是一些常见服务器的配置示例：

Express.js

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

// 允许所有跨域请求
app.use(cors());

// 或配置特定源
app.use(cors({
  origin: 'http://www.example.com',
  methods: ['GET', 'POST', 'PUT', 'DELETE'],
  allowedHeaders: ['Content-Type', 'Authorization'],
  credentials: true
}));

// 路由
app.get('/api/data', (req, res) => {
  res.json({ message: 'Hello from server' });
});

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

Nginx

location / {
  add_header 'Access-Control-Allow-Origin' 'http://www.example.com';
  add_header 'Access-Control-Allow-Methods' 'GET, POST, PUT, DELETE';
  add_header 'Access-Control-Allow-Headers' 'Content-Type, Authorization';
  add_header 'Access-Control-Allow-Credentials' 'true';

  if ($request_method = 'OPTIONS') {
    add_header 'Access-Control-Max-Age' 1728000;
    add_header 'Content-Type' 'text/plain charset=UTF-8';
    add_header 'Content-Length' 0;
    return 204;
  }
}

前端解决方案

JSONP

JSONP（JSON with Padding）是一种非官方的跨域解决方案，它利用了<script>标签没有跨域限制的特性。

function handleResponse(data) {
  console.log('JSONP response:', data);
}

// 创建script标签
const script = document.createElement('script');
script.src = 'https://api.example.com/data?callback=handleResponse';

document.head.appendChild(script);

服务器端需要配合返回：

handleResponse({
  "message": "Hello from server"
})

JSONP的缺点：

只支持GET请求
不安全，可能会遭受XSS攻击
无法处理错误

代理服务器

在开发环境中，可以使用代理服务器来解决跨域问题。代理服务器将前端的请求转发到目标服务器，然后将响应返回给前端。

Webpack Dev Server

// webpack.config.js
module.exports = {
  // ...
  devServer: {
    proxy: {
      '/api': {
        target: 'https://api.example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
};

使用时：

// 前端请求
fetch('/api/data')
  .then(response => response.json())
  .then(data => console.log(data));

Vite

// vite.config.js
export default {
  // ...
  server: {
    proxy: {
      '/api': {
        target: 'https://api.example.com',
        changeOrigin: true,
        rewrite: path => path.replace(/^\/api/, '')
      }
    }
  }
};

PostMessage

PostMessage API允许不同源的窗口之间进行通信。

// 发送方窗口
const targetWindow = window.open('https://www.example.com');

targetWindow.postMessage({
  message: 'Hello from another origin'
}, 'https://www.example.com');

// 接收方窗口
window.addEventListener('message', event => {
  // 验证发送方的源
  if (event.origin !== 'https://www.sender.com') {
    return;
  }

  console.log('Received message:', event.data);

  // 回复消息
  event.source.postMessage({
    reply: 'Hello back'
  }, event.origin);
});

WebSocket

WebSocket是一种双向通信协议，它不受同源策略的限制。

const socket = new WebSocket('wss://api.example.com/ws');

socket.onopen = function() {
  console.log('WebSocket connection established');
  socket.send('Hello server');
};

socket.onmessage = function(event) {
  console.log('Received from server:', event.data);
};

socket.onclose = function() {
  console.log('WebSocket connection closed');
};

socket.onerror = function(error) {
  console.error('WebSocket error:', error);
};

常见跨域场景及解决方案

开发环境跨域

解决方案：使用代理服务器（如Webpack Dev Server、Vite代理）

生产环境跨域

解决方案：后端设置CORS头部

第三方API跨域

解决方案：

如果第三方API支持CORS，直接调用
如果第三方API不支持CORS，使用后端代理
如果第三方API支持JSONP，使用JSONP

iframe跨域通信

解决方案：使用PostMessage API

本地文件跨域

解决方案：

使用本地服务器（如http-server）
禁用浏览器的安全策略（不推荐）

最佳实践

优先使用CORS：CORS是官方标准，安全且功能完善
开发环境使用代理：方便开发，无需修改后端代码
生产环境使用后端配置：更安全、更可靠
避免使用JSONP：除非万不得已，否则不建议使用JSONP，因为它有安全隐患
注意Cookie跨域：如果需要跨域发送Cookie，需要前后端同时配置

前端配置（Axios）：

axios.get('https://api.example.com/data', {
  withCredentials: true
});

后端配置：

// Express.js
app.use(cors({
  credentials: true,
  origin: 'http://www.example.com'
}));

设置合理的预检缓存时间：减少预检请求的次数

// Express.js
app.use(cors({
  maxAge: 86400 // 24小时
}));

避免使用通配符*：在生产环境中，尽量指定具体的允许源，而不是使用*

掌握这些跨域解决方案，将帮助你在前端开发中顺利解决各种跨域问题，确保前后端数据交互的正常进行。