Vue组件通讯中的跨域问题解决方案

// 发送JSONP请求
function jsonp(url, callback) {
  const script = document.createElement('script');
  script.src = url;
  window[callback] = function(data) {
    delete window[callback];
    document.body.removeChild(script);
    callback(data);
  }
  document.body.appendChild(script);
}

// 使用JSONP请求数据
jsonp('http://example.com/api/data?callback=handleData', function(data) {
  console.log(data);
});

// 设置允许跨域的域名
const allowedOrigins = ['http://example.com'];

// 检查请求是否允许跨域
function checkIfAllowedOrigin(origin) {
  return allowedOrigins.includes(origin);
}

// 处理CORS请求
function handleCORSRequest(req, res) {
  const origin = req.headers.origin;
  if (checkIfAllowedOrigin(origin)) {
    res.setHeader('Access-Control-Allow-Origin', origin);
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST');
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
    res.setHeader('Access-Control-Max-Age', '86400');
    // 处理请求...
  } else {
    // 返回非法请求错误
    res.statusCode = 403;
    res.end('Forbidden');
  }
}

// 服务器端处理跨域请求
app.use((req, res, next) => {
  if (req.method === 'OPTIONS') {
    handleCORSRequest(req, res);
  } else {
    next();
  }
});

// 客户端发送跨域请求
fetch('http://example.com/api/data', {
  method: 'GET',
  headers: {
    'Origin': 'http://example.com'
  }
})
  .then(response => response.json())
  .then(data => {
    console.log(data);
  });

// 代理服务器
app.use('/api', createProxyMiddleware({
  target: 'http://example.com',
  changeOrigin: true,
}));

// 客户端发送跨域请求
fetch('/api/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
  });