前端经典面试题合集, 怎么解决跨域问题?

Step 1

Q:: 怎么解决跨域问题？

A:: 跨域问题可以通过以下几种方式解决： 1. JSONP：通过script标签的src属性加载跨域资源，服务端返回JavaScript代码。 2. CORS（跨域资源共享）：在服务器端设置响应头，如Access-Control-Allow-Origin来指定允许访问的域。 3. 服务器代理：通过服务器中转请求，将跨域请求转换为同源请求。 4. WebSocket：通过WebSocket协议实现全双工通信，避免跨域限制。

Step 2

Q:: 什么是JSONP？如何使用？

A:: JSONP（JSON with Padding）是一种通过script标签跨域获取数据的方式。使用时，前端创建一个script标签，src指向包含回调函数的URL，服务器端返回JavaScript代码，其中调用了回调函数并传入数据。例如：<script src='http://example.com/data?callback=myCallback'></script>，服务器返回myCallback({key: 'value'})。

Step 3

Q:: CORS是什么？如何配置？

A:: CORS（跨域资源共享）是一种允许浏览器向跨域服务器请求资源的机制。配置时，服务器需要在响应头中添加Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers等头信息。例如，在Node.js中可以通过设置响应头来实现：res.setHeader('Access-Control-Allow-Origin', '*');。

Step 4

Q:: 什么是服务器代理？如何实现？

A:: 服务器代理是通过服务器中转请求，将客户端的跨域请求转换为同源请求的一种方式。可以在前端配置代理，如在webpack中配置devServer.proxy，或者在服务器端如Node.js中使用http-proxy-middleware进行代理。例如：app.use('/api', proxy({ target: 'http://example.com', changeOrigin: true }));。

Step 5

Q:: WebSocket如何解决跨域问题？

A:: WebSocket协议本身不受同源策略限制，可以在建立连接时通过握手完成跨域请求。前端通过new WebSocket(url)与服务器建立连接，服务器只需处理WebSocket请求即可。