Nuxt.js解决跨域问题

我们发起请求的时候，会报错

 methods: {
      onCategoryClick(item) {
        console.log("onCategoryClick...");
        console.log(item.favorites_id);
        console.log(item.favorites_title);
        this.currentCategory = item.favorites_title.split('').join("<em>/</em>");
        //加载数据
        this.loadContentByCategory(item.favorites_id);
      },
      loadContentByCategory(favoriteId) {
        api.getRecommendContent(favoriteId).then(result => {
          if (result.code === 10000) {
            this.content = result.data;
          }
        });
      }
    },

浏览器的控制台，可以看到报以下错误

Access to XMLHttpRequest at 'https://api.sunofbeach.net/shop/api//recommend/2011849237' 
from origin 'http://localhost:3000' has been blocked by CORS policy: 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

这里说跨域了，被阻止了。为什么会这样子呢？

因为我们本地的域名是localhost,而访问的是api.sunofbeach.net

所以就跨域了

跨域在浏览器端有这样的问题，为了安全嘛。

通常我们可以通过代理的方式解决这个问题，服务器对服务器的访问是没有跨域的问题。浏览器对服务器的访问则有跨域的限制。

安装代理依赖

我们在官网这里异步请求数据

它推荐我们使用axios

我们使用 axios 重构 HTTP 请求, 我们 强烈建议您 使用我们的 axios 模块 用于您的Nuxt项目中。

也就是这个了@nuxt.js/axios

我们是直接安装了axios

能不能设置代理呢？

也是可以的嘛

proxy-module

按这里的提示，我们去安装一下就好

cnpm install @nuxtjs/proxy --save

或者你使用npm吧

安装完成

配置代理

在我们的nuxt.config.js中添加以下配置：

modules: [
    '@nuxtjs/proxy'
  ],

  axios: {
    proxy: true,
    prefix: '/union/',
    credentials: true
  },

  proxy: {
    '/union/': {
      target: 'https://api.sunofbeach.net/shop/api/',
      pathRewrite: {
        changeOrigin: true,
        '^/union/': ''
      }
    }
  },

测试请求

我们在api里添加多一个接口

  getRecommendContentByProxy(categoryId) {
    return request.requestGet("/union/recommend/" + categoryId)
  }

点击首页的分类tab后，我们发起请求

 loadRecommendByProxy(id) {
        api.getRecommendContentByProxy(id).then(result => {
          console.log(result);
        })
      }

到这里，我们就获取到了精选的内容了。

后面我们再结合一个nginx解决这些问题，到部署的时候再告诉大家怎么样去改。