深入跨域，前端开发者的必修课

前端

2023-10-11 08:27:20

超越藩篱：跨域指南，前端开发者的必修课

跨域的本质

想象一下，你在一个热闹的公园里玩耍，突然发现自己被一堵高高的围墙隔开了。想要探索围墙另一边令人兴奋的游乐场，你必须想办法跨过这道障碍。这就是前端开发者在跨域问题中所面临的挑战。

跨域，是浏览器为了安全考虑，对不同来源的请求施加的限制。当浏览器检测到一个请求的源（协议、域名、端口）与当前页面的源不同时，就会阻止该请求的发送。这是为了防止恶意网站窃取数据或执行攻击。

跨域的解决方案

就像穿越公园围墙有多种方法，解决跨域问题也有一些常见的方法：

跨域资源共享（CORS） ：CORS就像一张通行证，允许前端页面与不同源的服务器合法地交互。它需要在服务端进行配置，明确哪些源可以访问其资源。

// 服务端配置 CORS
app.use(cors({
  origin: 'https://myfrontendapp.com',
  methods: ['GET', 'POST'],
  headers: ['Content-Type', 'Authorization']
}));

JSONP ：JSONP是利用<script>标签跨域请求数据的方法。它创建了一个JSONP函数调用，包含请求的数据，然后将<script>标签加载到页面中。浏览器会执行这个函数，并处理返回的数据。

// 前端 JSONP 请求
$.ajax({
  url: 'https://example.com/api/data',
  dataType: 'jsonp',
  success: function(data) {
    // 处理数据
  }
});

代理：代理服务器充当客户端和服务器之间的中介。前端页面向代理服务器发送请求，代理服务器将请求转发给目标服务器。目标服务器响应后，代理服务器再将响应转发给前端页面，绕过了浏览器的同源策略。

// 前端通过代理请求
const proxy = 'https://myproxy.com';
fetch(`${proxy}/https://example.com/api/data`)
  .then(res => res.json())
  .then(data => {
    // 处理数据
  });

WebSockets ：WebSockets是一种双向通信协议，允许客户端和服务器建立持久的连接。一旦建立连接，双方就可以互相发送数据，跨越了同源限制。

// 前端 WebSocket 连接
const socket = new WebSocket('wss://example.com/api/ws');
socket.onopen = () => {
  // 连接已建立
};
socket.onmessage = (event) => {
  // 收到数据
};

最佳实践

除了上述方法，还有一些最佳实践可以帮助避免跨域问题：