Vue项目中实现跨域的几种方法目标服务器的地址这是出于安全考虑防止恶意的网站获取用户的敏感信息

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

Vue项目中实现跨域的几种方法

一、使用代理服务器

使用代理服务器是Vue项目中实现跨域最常见的方法之一。Vue CLI自带了这个功能，方便我们在开发时进行跨域请求。

在Vue项目的根目录下找到或创建一个名为`vue.config.js`的文件。
在文件中配置代理服务器：

module.exports = { devServer: { proxy: { '/api': { target: '目标服务器的地址', changeOrigin: true, pathRewrite: {'^/api': ''} } } } }

解释：

`target`：目标服务器的地址。
`changeOrigin`：是否更改请求头中的字段。
`pathRewrite`：重写路径，将`/api`替换为空字符串。

优点：

简单易用，配置灵活。
适用于开发环境。

缺点：

仅适用于开发环境，生产环境需另行处理。

二、修改后端服务器的CORS配置

修改后端服务器的CORS配置，允许前端的请求通过。

在后端服务器的代码中设置CORS头信息。

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(); });

解释：

`Access-Control-Allow-Origin`：允许的域名，表示所有域名。
`Access-Control-Allow-Headers`：允许的请求头。

优点：

从根本上解决跨域问题。
适用于生产环境。

缺点：

需要修改后端代码，可能会影响其他服务。

三、使用JSONP

JSONP（JSON with Padding）是一种跨域请求的解决方案，但只支持GET请求。

前端发起JSONP请求。
后端返回JSONP格式的数据。

const express = require('express'); const app = express(); app.get('/jsonp', (req, res) => { const callback = req.query.callback; res.send(`${callback}({data: '这是跨域数据'})`); }); app.listen(3000);

优点：

不需要修改服务器的CORS配置。
适用于所有环境。

缺点：

只支持GET请求。
存在安全隐患。

四、通过Node.js中间件

通过Node.js中间件可以在前后端之间建立一个中间层，解决跨域问题。

使用Express框架搭建中间层服务器。

const express = require('express'); const { createProxyMiddleware } = require('http-proxy-middleware'); const app = express(); app.use('/api', createProxyMiddleware({ target: '目标服务器的地址', changeOrigin: true, pathRewrite: {'^/api': ''} })); app.listen(3000);

优点：

完全控制请求和响应。
可以处理复杂的请求逻辑。

缺点：

增加了额外的服务器维护成本。
配置较为复杂。

Vue项目中实现跨域的方法有多种，常见的方法有使用代理服务器、修改后端服务器的CORS配置、使用JSONP、通过Node.js中间件。每种方法都有其优缺点，选择适合自己项目的实现方式非常重要。