Vue CLI中实现跨三种方法·devServer·找到或创建`vue.config.js`文件

作者：编程小白 | 发布时间：2025-06-20 |

Vue CLI中实现跨域请求的三种方法

一、在`vue.config.js`中配置代理

在Vue CLI项目中，最简单的方法就是配置代理。这样，你就可以让请求先到你的开发服务器，然后再转发到目标API服务器。

  1. 找到或创建`vue.config.js`文件。
  2. 添加代理配置，比如这样：
```javascript module.exports = { devServer: { proxy: { '/api': { target: 'http://target-api-server.com', changeOrigin: true, pathRewrite: {'^/api' : ''} } } } } ```

使用时，直接使用相对路径，比如：

```javascript axios.get('/api/data'); ```

二、使用CORS解决跨域问题

CORS是一种浏览器技术，允许服务器设置特定的响应头来允许跨域请求。

  1. 在服务器端设置CORS响应头，例如在Express中：
```javascript 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(); }); ```

然后在Vue项目中直接请求：

```javascript axios.get('http://cross-origin-server.com/data'); ```

三、利用JSONP实现跨域

JSONP是一种支持GET请求的跨域解决方案，但现代开发中很少使用。

  1. 服务器端生成JSONP响应，例如：
```javascript res.jsonp({name: 'test'}); ```

在Vue项目中使用JSONP库，例如：

```javascript jsonp('http://cross-origin-server.com/data', {name: 'test'}, function(data) { console.log(data); }); ```
方法 优点 缺点 适用场景
代理 简单易用 开发环境专用 开发环境
CORS 稳健可靠 需要服务器端配合 生产环境
JSONP 简单 局限性大 特定场景

根据你的项目需求和环境选择合适的跨域解决方案吧！