vue.js - nuxt.js项目如何设置 proxy代理

问题描述

问 题

用了 nuxt.js，配合 axios 也能获取数据，但是按照以前的方式设置代理并不管用，一直提示请求头不匹配。

The 'Access-Control-Allow-Origin' header has a value 'http://xxx.com' that is not equal to the supplied origin. Origin 'http://localhost:3000' is therefore not allowed access.

以前是直接在webpack.config.js 中设置：

  devServer: {
    historyApiFallback: true,
    noInfo: true,
    proxy: {
      '/app/*': {
        target: 'http://xxx:8080',
        secure: false
      }
    }
  },

现在我在 nuxt.config.js 中设置了：

proxy: {
    '/app/*': {
      target: 'http://xxx:8080',
      secure: false
    }
  }

就会报错，请问下这个代理是在哪里应该如何设置？

解决方案

刚刚知道了怎么弄，感谢 用 nuxt 开发部署一个 v2ex 这篇文章，在[CORS]部分提到了一个官方库https://github.com/nuxt/modules 我在里面找到 axios 和 proxy 这两个，可以搭配着使用就可以了。

具体：

1、npm i @nuxtjs/axios @nuxtjs/proxy -D
2、在 nuxt.config.js 最后面添加：

module.exports = {
    build:{
        vendor: ['axios']
    }
    modules: [
        '@nuxtjs/axios',
        '@nuxtjs/proxy'
    ],
    proxy: [
        ['/app', { target: 'http://xxx.com:8080' }]
    ]
}

这篇关于vue.js - nuxt.js项目如何设置 proxy代理的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！