前端项目中如何解决跨域

1.使用代理服务器，在本地启动一个代理服务器，该服务器可以将前端发送的请求转发到目标服务器上，从而实现跨域请求

 1.1： 安装 http-proxy-middleware，npm install http-proxy-middleware --save

 1.2.在项目根目录下创建一个 setupProxy.js 文件。注意：文件名必须为 setupProxy.js

 1.3.在 setupProxy.js 文件中添加以下代码

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000', // 将请求代理到此地址
      changeOrigin: true, // 改变主机头的来源为目标URL
    })
  );
};

1.4.在项目中把请求的地址改成代理地址

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

参考链接：https://www.cnblogs.com/echolun/p/15173956.html

 2.使用postmessage来实现跨域

function postMessageUtils() {
  function sendMessage(targetWindow, message, targetOrigin) {
    targetWindow.postMessage(message, targetOrigin);
  }

  function addMessageListener(handler) {
    window.addEventListener("message", (event) => {
      // 验证消息来源合法性
      if (event.origin !== "http://localhost:3000") return;

      handler(event.data);
    });
  }

  return { sendMessage, addMessageListener };
}


//使用
const { sendMessage, addMessageListener } = postMessageUtils();

// 在发送方页面中
sendMessage(targetWindow, message, targetOrigin);

// 在接收方页面中
addMessageListener((message) => {
  console.log(`Received message: ${message}`);
});


//如何获取targetWindow，（若是iframe创建的）window.parent，（如果当前页面是由其他页面打开的）window.opener 

3.使用 XMLHttpRequest。使用 XMLHttpRequest 对象进行跨域请求，可以通过设置 withCredentials 属性和请求头来处理跨域请求

const xhr = new XMLHttpRequest();
xhr.withCredentials = true;
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.onreadystatechange = () => {
  if (xhr.readyState === 4 && xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};
xhr.open('GET', 'https://example.com/data', true);
xhr.send();

4. 使用 WebSocket 协议进行跨域通信，可以实现双向通信

const socket = new WebSocket('wss://example.com/socket');
socket.addEventListener('open', function (event) {
  socket.send('Hello Server!');
});
socket.addEventListener('message', function (event) {
  console.log('Message from server:', event.data);
});