NuxtJS部署Vercel后，axios无法向HTTPS服务器发起POST请求

问题描述 #

我在NuxtJS项目中通过axios向HTTPS服务器发送POST请求，本地同时运行前后端时功能正常，直接用工具向该服务器发POST请求也没问题，但部署到Vercel后无法获取返回内容。浏览器日志显示缺少CORS头Access-Control-Allow-Origin，随后出现NS_ERROR_DOM_BAD_URI错误。预期流程是发送请求后结束加载并展示返回的答案，现在完全走不通。

当前组件代码如下：

<script>
import LoadingWheel from '@/components/LoadingWheel.vue'
export default {
    components: { LoadingWheel },
    data() {
        return {
            form: {
                question: '',
                submitCounter: 0
            },
            answer: null,
            loading: false,
            typedAnswer: '',
            urls: null
        }
    },
    created() {
        setInterval(() => {
            this.form.submitCounter = 0
        }, 3600000)
    },
    methods: {
        resetForm() {
            this.form.question = ''
            this.answer = null
            this.loading = false
            this.typedAnswer = ''
            this.urls = null
        },
        async submitForm() {
            this.form.submitCounter++
            this.loading = true
            try {
                const { data } = await this.$axios.post(
                    'https://internet-ml-backend.paas.thamognya.com/api/nlp/no-context/question-answering/',
                    {
                        question: this.form.question
                    }
                )
                this.tmpquestion = this.form.question
                this.resetForm()
                this.answer = data.response.answer
                const typingInterval = setInterval(() => {
                    this.typedAnswer +=
                        this.answer[this.typedAnswer.length] || ''
                    if (this.typedAnswer.length === this.answer.length) {
                        clearInterval(typingInterval)
                    }
                }, 150)
                this.urls = data.resources
            } catch (error) {
                // console.error(error)
            }
        }
    }
}
</script>

解决方案 #

1. 后端配置CORS（优先推荐） #

如果你有权限修改后端服务器，直接在后端添加CORS配置，允许Vercel部署的域名（比如https://你的项目域名.vercel.app）发起跨域请求。不同后端框架的配置方式不同：

• Python Django：使用django-cors-headers库，在settings.py中设置CORS_ALLOWED_ORIGINS，把你的Vercel域名加进去。
• Node.js Express：使用cors中间件，配置origin参数为你的Vercel域名，或者按需允许指定域名。

2. NuxtJS配置代理（前端侧解决） #

利用Nuxt的代理模块，把前端的API请求转发到后端服务器，绕开浏览器的跨域限制：
首先安装代理模块：

npm install @nuxtjs/proxy

然后在nuxt.config.js中添加配置：

export default {
  // 其他已有的配置...
  modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy'
  ],
  axios: {
    proxy: true
  },
  proxy: {
    '/api/': {
      target: 'https://internet-ml-backend.paas.thamognya.com',
      pathRewrite: { '^/api/': '/api/' },
      changeOrigin: true
    }
  }
}

最后修改组件中的请求URL，换成代理后的路径：

const { data } = await this.$axios.post(
  '/api/nlp/no-context/question-answering/',
  { question: this.form.question }
)

3. 完善错误处理逻辑 #

把代码中catch块的注释去掉，添加错误处理，既方便调试，也能给用户友好提示：

catch (error) {
  console.error('请求失败详情:', error)
  this.loading = false // 结束加载状态，避免一直转圈圈
  // 这里可以换成项目里的提示组件，比如element-ui的message
  alert('请求出错，请稍后重试')
}

内容的提问来源于stack exchange，提问作者Thamognya