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

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

相关推荐
azhou的代码园1 天前
基于SpringBoot+Vue的家教小程序
vue.js·spring boot·小程序·毕业设计·家教小程序
anyup1 天前
全面重构的 uni-app 多平台上传组件,功能强到离谱!
前端·vue.js·uni-app
WebGirl1 天前
【Vue3】withDefaults和defineProps设置默认值
vue.js
FlyWIHTSKY1 天前
Element Plus 中 el-row 和 el-col 的完整使用指南**
javascript·vue.js·ecmascript
azhou的代码园1 天前
基于微信小程序的图片识别科普系统的设计与实现
vue.js·spring boot·微信小程序·小程序·毕业设计·科普·图片识别
三维搬砖者2 天前
挑战AI辅助从零构建3D模型编辑器:01基于Vue3 + Three.js的现代化架构设计
前端·vue.js·github
LIO2 天前
一套代码,多端并行——uni-app + Vue3 多端开发完全指南
前端·vue.js·uni-app
前端那点事2 天前
干掉重复请求!Vue+Axios全局防抖节流封装,企业级开箱即用
前端·vue.js
前端那点事2 天前
Vue三点运算符(...)超全详解!9大数组+4大对象实战用法,零基础必懂
前端·vue.js
镜宇秋霖丶2 天前
常驻大哥24分法,记得看
前端·javascript·vue.js