关于代理请求的端口号问题

Question

前后端分离，前端发起请求时，出现了如下错误

XHRPOST
http://localhost:8080/api/account/switchAccount
[HTTP/1.1 403 Forbidden 183ms]

XML 解析错误：语法错误
位置：http://localhost:8080/api/account/switchAccount

疑惑：设置了vue.config.js中的代理，为何端口号是8080，不是8088？另外报出的403该如何解决？
前端请求界面代码

<el-form :model="account" ref="form" label-width="80px">
                <el-form-item label="账户文件">
                    <el-upload action="/api/account/switchAccount" :on-success="handleSuccess">
                        <el-button slot="trigger" size="small" type="primary">切换账户</el-button>
                    </el-upload>
                </el-form-item>
            </el-form>

<script>
export default {
    methods: {
        handleSuccess(response, file, fileList) {
            this.$message.success('上传成功');
        }
    }
}
</script>

在想后端Java spring boot webapi，时出现了上边提到的错误。
关于vue.config.js代码如下：

const {defineConfig}=require('@vue/cli-service')
module.exports=defineConfig({
    devServer:{
        proxy:{
            '/api':{
                target:'http://127.0.0.1:8088',
                ws:true,
                changeOrigin:true,
                pathRewrite:{
                    '^/api':''
                }
            }
        }
    }
})

后端代码如下：

    @PostMapping("/account/switchAccount")
    @CrossOrigin(origins ="http://127.0.0.1:8080/ChangeAccount")
//    @CrossOrigin
    public void switchAccount(@RequestParam("file") MultipartFile file){
        if (!file.isEmpty()) {
            try {
                byte[] bytes = file.getBytes();
                // 使用bytes来保存文件...
            } catch (Exception e) {
            }
        } else {
        }
}

后端的端口相关配置：

server.port=8088

恳请大家的指导与帮助

Answer 1

【以下回答由 GPT 生成】

根据您提供的信息，关于Vue.js中关于代理请求的端口号问题，我将为您提供解决方案。

首先，Vue.js配置中的代理端口号是由devServer中的target属性控制的。在您提供的代码中，target值为'http://127.0.0.1:8088'，这意味着所有请求都将被代理到该地址的8088端口上。但是您在前端请求界面的代码中，请求的地址是相对地址"/api/account/switchAccount"，这意味着请求将发送到开发服务器的端口上（默认为8080）。

要解决这个问题，您可以在前端请求界面的代码中将请求地址更改为完整的URL地址，其中端口号为8088。修改后的代码如下：

<el-form :model="account" ref="form" label-width="80px">
    <el-form-item label="账户文件">
        <el-upload action="http://localhost:8088/api/account/switchAccount" :on-success="handleSuccess">
            <el-button slot="trigger" size="small" type="primary">切换账户</el-button>
        </el-upload>
    </el-form-item>
</el-form>

这样，请求将直接发送到8088端口上。

至于403错误，HTTP状态码403表示服务器拒绝了请求。这通常是由于请求的资源未经授权或访问被禁止引起的。要解决此问题，您可以采取以下步骤：

1. 确保后端服务已正确配置跨域访问。您可以在后端代码中添加允许跨域访问的代码。例如，在Java Spring Boot中，您可以在Spring Boot应用程序类上添加@CrossOrigin注解来允许所有来源的请求访问。

例如，您可以在后端Controller类上添加@CrossOrigin注解：

@CrossOrigin(origins = "*", maxAge = 3600)
@RestController
public class AccountController {
    //...
}

1. 检查后端的权限设置。如果请求的资源需要特定的权限才能访问，您需要确保当前用户具有足够的权限。您可以根据后端的具体逻辑检查权限。

如果您已经尝试了上述步骤但问题仍然存在，可能是由于其他配置或代码问题引起。我建议您检查后端的日志以获取更多详细的错误信息，以便进一步排除问题。

这就是关于Vue.js中关于代理请求的端口号问题的解决方案。希望对您有帮助！如果您有任何其他问题，请随时提问。

【相关推荐】

• 你看下这篇博客吧, 应该有用👉 ：基于VUE框架、前端UI样式库Bootstrap4、在线WebApi资源调用的Web前端技术课程设计《天气易搜》

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^