使用代理服务器在文件中添加代理配置- 不如CORS安全容易受到JSONP劫持攻击

作者：机器人技术佬 | 发布时间：2025-06-27 |

一、使用代理服务器

使用代理服务器是解决跨域问题的常用方法之一，尤其是在Vue CLI项目中。这种方法非常简单，适合快速开发和测试。

步骤：

  1. 在Vue项目的根目录中找到或创建一个名为 vue.config.js 的文件。
  2. 在文件中添加代理配置，例如：
``` module.exports = { devServer: { proxy: { '/api': { target: '', changeOrigin: true, pathRewrite: {'^/api': ''} } } } } ```

解释：

这里的配置包括： - `target`: 目标服务器地址，也就是你的后端API地址。 - `changeOrigin`: 是否更改请求头中的Host值。 - `pathRewrite`: 路径重写规则，这里将前缀去掉。

优点：

- 配置简单，易于上手。 - 适用于开发环境。 - 可以灵活配置多个代理规则。

缺点：

- 仅适用于开发环境，生产环境需要其他方案。

二、在后端设置CORS

通过在后端设置CORS（跨域资源共享），可以允许前端跨域请求。这是一种比较通用的方法。

步骤：

  1. 在后端代码中添加CORS头。例如，在Node.js中可以使用中间件：
``` app.use((req, res, next) => { res.header('Access-Control-Allow-Origin', '*'); res.header('Access-Control-Allow-Headers', 'Origin, X-Requested-With, Content-Type, Accept'); next(); }); ```

解释：

这个中间件会自动设置CORS头，允许所有来源的跨域请求。你可以根据需要设置具体的来源和请求方法。

优点：

- 适用于开发和生产环境。 - 控制灵活，可以设置具体的允许来源和方法。

缺点：

- 需要后端配合，可能涉及代码修改。 - 需要注意安全性，避免暴露敏感资源。

三、使用JSONP

JSONP是一种古老的跨域请求方式，主要用于GET请求。它通过动态创建`