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

项目背景:我使用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有冲突。

相关推荐
一天 24h17 分钟前
Vue3父子组件传值:从零到精通
前端·javascript·vue.js·pycharm·npm·学习方法
小李云雾1 小时前
Vue Router 从入门到精通:路由核心知识点全解析
前端·javascript·vue.js
小新1102 小时前
vue 实战项目 天气查询
前端·javascript·vue.js
Hello馒头儿3 小时前
vue3+uniapp经典hook方式实现一个更多加载的列表组件
前端·javascript·vue.js
漂流技术客3 小时前
超详细!Vue3 + ECharts 快速实现地图可视化(附最新GeoJson地址)
前端·vue.js
小李云雾3 小时前
深入浅出 Vue 3 核心知识点:从基础到实战
前端·javascript·vue.js·程序人生
Cobyte3 小时前
16.响应式系统比对:链表如何实现 computed 的高效更新
前端·javascript·vue.js
一天 24h3 小时前
Pinia 新手完全指南:从入门到精通的实战教程
前端·javascript·vue.js·pycharm·前端框架
向日的葵0063 小时前
快速了解vue中的路由如何实现(路由一)
前端·vue.js·vue·路由
珎珎啊3 小时前
React 和 Vue 3的区别
前端·vue.js·react.js