本地项目运行提示跨域问题

项目背景:我使用phpwebstudy在本地搭建了一个项目,然后前端是http://localhost:8080/

后端我直接创建了一个本地域名,例如www.abc.com

然后vue.config.js配置如下,这个配置在我所有线上环境是没有任何问题的

复制代码
devServer: {
        proxy: {
            '/adminapi': {
                target: 'http://www.abc.com/api',
                changeOrigin: true,
                pathRewrite: {
                    '^/adminapi': '/adminapi'
                }
            }
        }
    },

但是,在本地无法运行。

一直提示:

复制代码
/Proxy error: Could not proxy request /adminapi/Login/index from localhost:8080 to http://www.abc.com/api (ECONNREFUSED).

解决方案:

不用www.abc.com了,直接把后端的端口改成8081,然后vue.config.js配置如下

复制代码
devServer: {
        proxy: {
            '/adminapi': {
                target: 'http://127.0.0.1:8081/api',
                changeOrigin: true,
                pathRewrite: {
                    '^/adminapi': '/adminapi'
                }
            }
        }
    },

搞定!

哪怕你用http://localhost:8081/api都不行,感觉是两个localhost有冲突。

相关推荐
gis开发之家31 分钟前
《Vue3 从入门到大神33篇》Vue3 源码详解(三):响应式核心思想——从 Object.defineProperty 到 Proxy
前端·javascript·vue.js·vue3·vue3源码
濮水大叔2 小时前
在 DTO 中使用 Form Layout 配置复杂表单,支持 Tabs/Groups/Sections
vue.js·typescript·node.js
张人玉2 小时前
Vue 3 + ECharts 智慧城市大屏——赣州智慧城市数据可视化平台
vue.js·echarts·智慧城市
come112342 小时前
Vue 3 与现代 JavaScript 常用语法指南
前端·javascript·vue.js
敖行客Allthinker2 小时前
Vuex 状态响应机制:watch 与 subscribe 的对比分析
vue.js
用户2930750976692 小时前
Vue3 流式 AI 对话:深入理解两个 done 与 buffer 缓存机制
vue.js
qq_589666052 小时前
npm install npm install -g @vue/cli 分别是什么意思以及安装路径
前端·vue.js·npm
李剑一21 小时前
ant-design-vue 1.x 版本换肤功能开发
前端·vue.js·ant design
李明卫杭州1 天前
Vue2 与 Vue3 自定义指令详解:钩子变化、迁移指南与实战示例
前端·javascript·vue.js
nicole bai1 天前
vue 自定义模块内容
前端·javascript·vue.js