XiangJv

在使用nuxt搭建项目遇到跨域的问题，这里记录下nuxt配置实现axios代理，解决跨域的问题，解决跨域的地方有两个地方，一个是nuxt的proxy，一个是nginx的accessHead设置跨域

nuxt 方式

axios：nuxt默认是有axios包的 如果没有就去下载

$ npm i @nuxtjs/axios @nuxtjs/proxy -D

 nuxt.config.js 最后面添加

module.exports = {
  ...,
  // Nuxt.js modules
  modules: [
    '@nuxtjs/axios', "@nuxtjs/proxy"
  ],
  // 配置代理
  proxy: [
    [
      '/api',{
        target: 'http://ip.ip.ip.ip:port/route',
        changeOrigin:true,
        pathRewrite: {
        '^/api': '/'
        }
      }
    ],
  ],

}

 

nginx 方式:

    # 直接请求nginx也是会报跨域错误的这里设置允许跨域
    # 如果代理地址已经允许跨域则不需要这些, 否则报错(虽然这样nginx跨域就没意义了)
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Headers X-Requested-With;
    add_header Access-Control-Allow-Methods GET,POST,OPTIONS;

页面引用的时候

this.$axios({
  url: '/api/login',
  data: {
    username: '哈哈哈',
    password: '123'
  }
}).then(res => {
  console.log('res: ', res)
});