分片上传 报错 POST http://localhost/api/addNotice 504 (Gateway Time-out) 怎么解决代码 vue3前端使用axios发请求 node后端

出现 504 (Gateway Time-out) 错误通常是因为服务器在处理请求时超时了。解决这个问题的方法有以下几种：

1. 增加服务器处理请求的时间，可以在服务器的配置文件中进行修改。

2. 检查网络连接是否正常，如果网络连接不稳定，也可能导致请求超时。

3. 检查后端代码是否有问题，比如是否出现了死循环等问题。

4. 可以使用分段上传的方法，把大文件分成若干个小文件进行上传，这样可以减少单个请求的数据量，降低请求超时的概率。

5. 可以尝试使用其他的网络协议，比如HTTP/2或者WebSocket等，这些协议可以提高请求的效率，减少请求超时的可能性。

针对你的代码，可以先检查后端代码是否有问题，如果没有问题，可以尝试使用分段上传的方法。同时也可以检查网络连接是否正常，以及是否有其他的网络问题导致请求超时。

相关问题

import Vue from 'vue' import App from './App' import router from './router' //设置反向代理，前端请求默认发送到 http://localhost:8443/api const axios = require('axios'); axios.defaults.baseURL = 'http://localhost:8885/api' // //全局注册，之后可在其他组件中通过 this.$axios 发送数据 Vue.prototype.$axios= axios Vue.config.productionTip = false /* eslint-disable no-new */ new Vue({ el: '#app', router, components: { App }, template: '<App/>' })转成 vue3代码

在 Vue 3 中，全局注册可以使用 `app.config.globalProperties` 来实现，代码如下：

import { createApp } from 'vue'
import App from './App.vue'
import router from './router'

import axios from 'axios'
axios.defaults.baseURL = 'http://localhost:8885/api'

const app = createApp(App)
app.config.globalProperties.$axios = axios

app.use(router).mount('#app')

这里使用了 `createApp` 方法来创建 Vue 应用，然后使用 `app.config.globalProperties` 来注册全局变量 `$axios`，最后使用 `app.use` 来加载路由，并使用 `app.mount` 方法来挂载 Vue 应用到 DOM 元素上。

Access to XMLHttpRequest at 'http://localhost:8080/springprojecttraining/api/updateUser' from origin 'http://localhost:8081' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. xhr.js:160 POST http://localhost:8080/springprojecttraining/api/updateUser net::ERR_FAILED 200 dispatchXhrRequest @ xhr.js:160 xhrAdapter @ xhr.js:11 dispatchRequest @ dispatchRequest.js:59 Promise.then (async) request @ Axios.js:51 Axios.<computed> @ Axios.js:71 wrap @ bind.js:9 submitForm @ user.vue:346 click @ user.vue:407 invokeWithErrorHandling @ vue.esm.js:3735 invoker @ vue.esm.js:1552 invokeWithErrorHandling @ vue.esm.js:3735 Vue.$emit @ vue.esm.js:2821 handleClick @ element-ui.common.js:9465 invokeWithErrorHandling @ vue.esm.js:3735 invoker @ vue.esm.js:1552 original_1._wrapper @ vue.esm.js:8013 createError.js:16 Uncaught (in promise) Error: Network Error at createError (createError.js:16:1) at XMLHttpRequest.handleError (xhr.js:69:1)为什么报错 如何解决呢

这是因为浏览器实施了同源策略（Same-Origin Policy）限制，导致从一个源访问另一个源时会被拒绝，特别是在前端使用JavaScript发起Ajax请求时。在这种情况下，需要进行跨域资源共享（CORS）配置。

解决方法如下：

1. 在服务器端配置CORS，允许指定的源或所有源访问：

- 允许指定源访问：

在服务器端的响应中添加Access-Control-Allow-Origin头，指定允许访问的源，例如：

Access-Control-Allow-Origin: http://localhost:8081

- 允许所有源访问：

在服务器端的响应中添加Access-Control-Allow-Origin头，指定允许所有源访问，例如：

Access-Control-Allow-Origin: *

2. 在前端使用代理服务器（Proxy）转发请求，以绕过浏览器的同源策略限制。

例如，使用Vue.js，可以在vue.config.js中添加以下配置：

module.exports = {
  devServer: {
    proxy: {
      '/springprojecttraining': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
}

这样，在前端使用axios等工具时，只需要将请求的URL改为代理服务器地址，例如：

axios.post('/springprojecttraining/api/updateUser', data)

这样就可以解决跨域问题了。