NUXT.js跨域问题解决

在springboot博客系统开发中，使用nuxt.js写博客前端，遇到了这样的问题

(index):1 Access to XMLHttpRequest at 'http://localhost:2020/portal/article/list/2/5' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

这是由于存在两个不同的请求域造成的。在NUXT官网的F&A中有解答。这里先附上链接：http-proxy，然后再看看解决办法。

安装代理

npm i @nuxtjs/proxy -D

配置代理

在 nuxt.config.js 配置文件中添加对应的模块，并设置代理

 modules: [
    '@nuxtjs/axios',
    '@nuxtjs/proxy'
  ],
  axios: {
    proxy: true
  },
  proxy: {
    '/api': {
      target: 'http://example.com',
      pathRewrite: {
        '^/api' : '/'
      }
    }
  }