Vue项目中如何解决 blocked by CORS policy 问题？

Question

在Vue项目中，遇到“blocked by CORS policy”问题时，通常是由于前端向后端发起跨域请求，而服务器未正确配置跨域资源共享（CORS）导致。解决此问题的常见方法有以下几种：一是在开发环境中使用代理，通过vue.config.js文件配置devServer.proxy，将前端请求转发到目标服务器；二是在后端服务器开启CORS支持，例如在Express中使用cors中间件，允许特定来源访问；三是通过JSONP实现简单GET请求的跨域（但不推荐用于现代项目）。其中，代理方式最为常用且易于维护，能有效避免跨域问题对开发的影响。

Answer 1

1. 问题概述

在Vue项目中，当遇到“blocked by CORS policy”问题时，通常是因为前端向后端发起跨域请求，而服务器未正确配置跨域资源共享（CORS）。这种问题会阻止浏览器加载资源或与后端API通信。以下将从常见技术问题、分析过程和解决方案等角度逐步深入探讨。

1.1 常见场景

以下是几个常见的跨域问题场景：

• 开发环境下的本地服务器与远程API之间的请求失败。
• 生产环境中，前端部署的域名与后端API域名不一致。
• 使用第三方服务时，API未正确配置允许的来源。

2. 解决方案

解决跨域问题的方法有多种，下面详细介绍三种常见方法，并推荐最合适的实践方式。

2.1 使用代理（推荐）

在开发环境中，可以通过配置 vue.config.js 文件中的 devServer.proxy 来实现请求转发。

// vue.config.js
module.exports = {
    devServer: {
        proxy: {
            '/api': {
                target: 'http://example.com', // 目标服务器地址
                changeOrigin: true,         // 是否改变源
                pathRewrite: { '^/api': '' } // 路径重写
            }
        }
    }
};

通过这种方式，所有以 /api 开头的请求都会被转发到目标服务器。

2.2 后端开启CORS支持

如果后端是基于Node.js和Express框架构建的，可以使用 cors 中间件来处理跨域问题。

// server.js
const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors({
    origin: 'http://localhost:8080', // 允许的前端域名
    methods: ['GET', 'POST'],       // 允许的HTTP方法
    allowedHeaders: ['Content-Type']// 允许的请求头
}));

app.listen(3000, () => console.log('Server running on port 3000'));

此配置允许来自 http://localhost:8080 的请求访问API。

2.3 使用JSONP（不推荐）

JSONP是一种较早的跨域解决方案，适用于简单的GET请求。但现代项目中已很少使用，因为它存在安全风险且功能有限。

3. 方案对比

以下是三种方案的对比表格：

方案	优点	缺点	适用场景
代理	易于配置，不影响生产环境	仅适用于开发环境	本地开发调试
后端CORS	全面解决问题，适用于生产环境	需要修改后端代码	生产部署
JSONP	无需后端支持	仅支持GET请求，安全性差	遗留系统兼容

4. 流程图

以下是解决跨域问题的流程图：

graph TD;
    A[开始] --> B{是否为开发环境?};
    B --是--> C[配置代理];
    B --否--> D{后端是否支持CORS?};
    D --是--> E[检查CORS配置];
    D --否--> F[添加CORS中间件];
    C --> G[测试请求];
    E --> G;
    F --> G;
    G --> H[结束];