【跨域】nuxt.js axios 前端跨域接口调不通

在调试后端接口遇到这样的跨域报错提示：

Access to XMLHttpRequest at ‘http://192.168.xxx.xxx:xxx/xxxx’ from origin ‘http://localhost:8010’ has been blocked by CORS policy: The ‘Access-Control-Allow-Origin’ header contains multiple values ‘http://localhost:8010, *’, but only one is allowed.

调用：

 axios.get("http://xxx", {
      params: { 
      }
    })
    .then(response => {
      console.log(response);
    })
    .catch(function(error) {
      console.log(error);
    });

但发现将url通过浏览器打开，能直接接收到到后端返回的response,经过配置代理后能成功访问了，配置如下：

1.先用cnpm安装 axios,@nuxtjs/axios,@nuxtjs/proxy 和 qs

cnpm install axios @nuxtjs/axios --save-dev
cnpm install @nuxtjs/proxy qs --save-dev

2.在plugins文件夹下新建axios.js文件：

//使用qs将请求从参数转化位字符串

import qs from"qs";

export default function({ $axios, redirect }){

$axios.onRequest(config=>{

    config.data = qs.stringify(config.data, {

        allowDots:true

    });

        returnconfig;

  });

$axios.onResponse(response=>{

    returnPromise.resolve(response.data);

  });

$axios.onError(error=>{

    returnPromise.reject(error);

  });

}

3.配置nuxt.config.js

var webpack = require('webpack');
module.exports = {
  modules: [
    ['@nuxtjs/axios',"@nuxtjs/proxy"]
   ],
  plugins:[
    {src:"~/plugins/axios.js",ssr:true},
  ],
  axios: {
    proxy: true,
    prefix: '/api', // baseURL
    credentials: true,
  },
  proxy: {
    '/api': {
      target: 'http://192.168.xxx:xxx/xxx', // 代理地址
      changeOrigin: true,
      pathRewrite: {
        '^/api': '', //将 /api 替换掉
      }

    }
  }
}

4.请求后端接口：

axios.get("/api/xxx", {
  params: {

  }
})
.then(response => {
 console.log(response);
})
.catch(function(error) {
  console.log(error);
});

能得到后端返回的response了：

温馨提示：

发布后，发现nuxt太调皮了，这种方式打包静态生成的线上代理的接口报404，代理接口只能在开发环境用

更多参考：vue中使用axios 代理请求 ，打包之后失效 请求报404

线上打包跨域其他解决方案：
vue利用axios处理开发环境和生成环境的跨域问题