在使用vue进行开发时，我们经常需要与后端api服务器进行交互。为了避免cors（cross-origin resource sharing）问题，通常会在vue的配置中使用代理转发进行请求转发。但是，有时候我们需要在不使用代理的情况下直接与api服务器进行交互，这时该怎么做呢？
1.使用第三方库
如果你不想使用VueCLI的默认代理配置，你可以选择使用第三方库来进行请求。比如我们可以使用Axios，通过在请求时设置请求头和相关参数，直接与API服务器进行交互。
首先，我们需要在Vue项目中安装Axios：
npm install axios --save
在需要进行请求的组件中，我们可以这样使用Axios：
立即学习“前端免费学习笔记（深入）”；
import axios from 'axios'
axios.get('/api/getUserInfo', {
headers: {
'Content-Type': 'application/json'
}
}).then(res => {
console.log(res)
})在代码中，我们使用Axios的get方法来进行请求，同时设置请求头为contentType为application/json。这样就可以直接向API服务器发起请求，获取数据。
2.使用Webpack Plugin
我们也可以通过Webpack的插件来实现不使用代理转发的请求。具体实现是通过配合express和http-proxy-middleware插件设置一个本地的服务器来替代代理服务器，从而实现对API服务器的访问。
首先，我们需要先安装相关插件：
mallcloud商城基于SpringBoot2.x、SpringCloud和SpringCloudAlibaba并采用前后端分离vue的企业级微服务敏捷开发系统架构。并引入组件化的思想实现高内聚低耦合，项目代码简洁注释丰富上手容易，适合学习和企业中使用。真正实现了基于RBAC、jwt和oauth2的无状态统一权限认证的解决方案，面向互联网设计同时适合B端和C端用户，支持CI/CD多环境部署，并提
npm install express http-proxy-middleware --save-dev
在项目根目录中新建一个server.js文件，用于启动本地服务器：
const express = require('express')
const proxy = require('http-proxy-middleware')
const app = express()
app.use('/api', proxy({
target: 'http://api.server.com',
changeOrigin: true,
pathRewrite: {
'^/api': ''
}
}))
app.listen(3000, () => {
console.log('Server is running at localhost:3000')
})这里我们通过使用http-proxy-middleware来实现对API服务器的转发，同时设置target来指定目标服务器。
然后，在package.json文件中添加一个script命令，用于启动本地服务器：
"scripts": {
"dev-server": "node server.js"
}最后，在Vue项目中的axios配置中将baseURL设置为http://localhost:3000/api，即可直接向API服务器发起请求：
import axios from 'axios'
axios.defaults.baseURL = 'http://localhost:3000/api'
axios.get('/getUserInfo').then(res => {
console.log(res)
})这样，我们就可以直接通过http://localhost:3000/api/getUserInfo地址向API服务器发起请求。
总结
以上就是两种使用Vue进行开发时不使用代理转发的方法。虽然使用代理转发是解决CORS的有效方法，但是在某些情况下，直接与API服务器进行交互更加方便。希望本篇文章对你有所帮助。
