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
    }
  }

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

阅读 18.9k
2 个回答

更新:因为一些原因我们的这个项目不再维护了,所以我也不清楚nuxt.js是不是发生了新的变化,如果按照我这个配置仍有问题的小伙伴们另开一个问题吧,抱歉啊~~~


刚刚知道了怎么弄,感谢 用 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' }]
    ]
}
新手上路,请多包涵

那问题就来了 如果我不使用@nuxtjs/axios 而是自己使用import的axios 怎么配置proxy

推荐问题
宣传栏