面试题：Vue项目中跨域问题的常见解决方案有哪些

Question

在Vue项目开发过程中，经常会遇到跨域问题。请详细阐述至少两种常见的跨域解决方案，并说明每种方案的适用场景及原理。

Answer 1

1. JSONP

• 适用场景：适用于简单的跨域请求，尤其是只需要进行GET请求的场景，比如从第三方获取数据，如获取天气信息等不涉及复杂交互和其他请求方法的场景。
• 原理：利用<script>标签没有跨域限制的特性。通过动态创建<script>标签，其src属性指向跨域的API接口，并在请求的URL中指定回调函数名。服务端返回的数据会以回调函数调用的形式包裹，浏览器接收到响应后，会将其作为JavaScript代码执行，从而实现跨域数据获取。例如：

<script>
function jsonpCallback(data) {
    console.log(data);
}
</script>
<script src="http://example.com/api?callback=jsonpCallback"></script>

在Vue中可以使用jsonp库实现类似功能。

2. CORS（跨域资源共享）

• 适用场景：适用于现代浏览器环境下各种复杂的跨域请求场景，支持多种请求方法（GET、POST、PUT等）和复杂的请求头。如前后端分离项目，后端为前端提供各种接口服务。
• 原理：需要浏览器和服务器同时支持。浏览器在发送跨域请求时，会根据请求方法和请求头信息判断是否为简单请求。对于非简单请求，浏览器会先发送一个预检请求（OPTIONS），询问服务器是否允许该实际请求。服务器通过响应头信息（如Access-Control-Allow-Origin、Access-Control-Allow-Methods等）告知浏览器是否允许跨域访问。在Vue项目中，前端无需特殊处理，主要在后端配置相关CORS响应头。例如在Node.js的Express框架中：

const express = require('express');
const app = express();
app.use((req, res, next) => {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
    next();
});
// 其他路由和处理逻辑

3. 代理服务器

• 适用场景：适用于开发环境中，方便前端开发调试，将跨域请求转发到后端服务器，由后端服务器处理跨域问题。例如Vue项目在开发阶段调用后端接口。
• 原理：在开发环境中，通过配置Webpack等构建工具的代理服务器，将跨域请求转发到目标服务器。比如在Vue项目的vue.config.js中配置代理：

module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://target-server.com',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
};

这样前端发送到/api开头的请求，都会被代理到http://target-server.com，由后端服务器处理跨域问题。代理服务器起到了一个中间转发的作用，对前端来说就像是在同域下请求数据。