面试题：Vue中跨域问题产生的原因及常用解决方式

Question

在Vue项目开发中，跨域问题常常困扰开发者。请阐述跨域问题产生的原因，并列举至少两种在Vue项目里优雅处理跨域问题的常用方式，同时说明每种方式的基本原理和适用场景。

Answer 1

跨域问题产生的原因

浏览器的同源策略限制。同源是指协议、域名、端口都相同。当一个请求的URL与当前页面的URL不同源时，就会产生跨域问题，浏览器会阻止该请求，以防止恶意网站窃取用户数据。

处理跨域问题的常用方式

1. 使用代理服务器（webpack-dev-server代理）
   • 基本原理：在开发环境中，利用webpack-dev-server提供的代理功能，将跨域请求转发到目标服务器。例如，本地开发服务器运行在http://localhost:8080，而接口服务器在http://api.example.com，通过配置代理，将本地对/api开头的请求转发到http://api.example.com，这样就避免了浏览器的跨域限制。
   • 适用场景：主要适用于开发环境，方便前端开发人员在不改变后端代码的情况下解决跨域问题，快速进行开发和调试。
2. JSONP
   • 基本原理：利用<script>标签没有跨域限制的特性。通过动态创建<script>标签，将回调函数名作为参数拼接到请求URL中，服务器返回数据时将数据包裹在回调函数中，从而实现跨域数据获取。
   • 适用场景：适用于只支持GET请求且后端愿意配合返回JSONP格式数据的场景，一般用于简单的跨域数据获取，比如一些第三方数据接口。
3. CORS（跨域资源共享）
   • 基本原理：服务端设置响应头，允许特定的源访问资源。例如设置Access - Control - Allow - Origin头来指定允许访问的源。浏览器在发送请求时，如果发现是非同源请求，会先发送一个预检请求（OPTIONS），询问服务器是否允许该跨域请求，服务器根据请求头中的信息决定是否允许，之后正式的请求才会被发送。
   • 适用场景：适用于前后端都可控制的场景，只要后端配置允许跨域，前端就可以正常发起跨域请求，是目前解决跨域问题比较通用的方式，在生产环境中广泛使用。