直接在浏览器访问项目环境地址,一切功能正常,但本地启动前端vue项目接口全都报错跨域问题
解决方法:配置代理。具体步骤如下:
-
在
vue.config.js中配置以下代码:devServer: { ...... // 本地开发代理,解决 CORS 问题 proxy: { '/api': { target: '(你对接的服务端地址)', changeOrigin: true, pathRewrite: { '^/api': '' }, // 将 /api 替换为空 -> 转到后端根路径 secure: false } } ...... }, -
在
api\base\config.js中配置以下代码:// api/base/config.js(开发环境)
const BASE_URL = '/api' // 开发期间走 devServer proxy
// 生产环境可用环境变量替换为真实地址
// const BASE_URL = process.env.VUE_APP_BASE_URL || '/api'
export { BASE_URL } -
配置完成后重新启动项目即可。