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

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

### 如何在本地环境启动和运行前后端分离的Web应用 #### 前提条件 为了确保能够顺利地在一个本地环境中启动并运行一个前后端分离的应用程序,需要确认安装了必要的软件工具以及开发环境。对于基于C#构建的后端服务和Vue.js作为前端框架的情况来说,至少要准备.NET SDK用于支持C#项目的编译与执行,Node.js及其包管理器npm来处理前端依赖项。 #### 配置后端服务(C#) 考虑到DotNet版本可能不匹配的问题[^1],应当先验证当前使用的.NET Core/ASP.NET Core版本是否兼容于项目需求。如果存在差异,则需下载对应版本的SDK或修改`global.json`文件指定目标框架版本。接着,在命令提示符下进入API工程目录并通过如下指令完成应用程序的初始化: ```bash dotnet restore # 恢复NuGet包 dotnet build # 编译解决方案 ``` 之后可以通过 `dotnet run` 来启动后端服务,默认情况下会监听特定IP地址上的某个HTTP端口号(比如http://localhost:5000)。此时应该注意记录该URL路径以便稍后配置资源共享(CORS)政策时使用。 #### 设置前端部分(Vue) 针对前后端请求端口不同的情况所引起的接口不可达问题[^2],建议采取调整代理设置的方法解决。具体操作是在vue.config.js中定义devServer.proxy属性指向实际提供RESTful API的服务位置。例如: ```javascript module.exports = { devServer: { proxy: 'http://localhost:5000' // 将此替换为后端服务的真实地址 } } ``` 这一步骤使得开发者能够在无需更改任何代码的前提下实现前后两端之间的通信测试工作。另外,记得按照官方指南说明利用npm install获取所有必需库,并借助 npm run serve 开启热重载模式下的开发服务器实例。 #### 调试技巧 当遇到难以定位错误源的情形时,可考虑启用更详细的日志输出帮助诊断问题所在。对于ASP.NET Core而言,可以在appsettings.Development.json里适当放宽Logging级别;而对于Vue CLI脚手架搭建出来的单页面应用(SPA),则可通过浏览器内置开发者工具审查网络请求状态码、响应体内容等信息进一步排查故障原因。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值