vue axios访问外部API报错如何解决

Question

后端是Express，CROS也设置了跨域请求（因为前端在8080，后端3000，这俩互通没有问题），

app.all('*', function(req, res, next) {
  // CORS headers
  res.header("Access-Control-Allow-Origin", "*"); // restrict it to the required domain
  res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE,OPTIONS');
  // Set custom headers for CORS
  res.header('Access-Control-Allow-Headers', 'Content-type,Accept,X-Access-Token,X-Key');
  if (req.method == 'OPTIONS') {
    res.status(200).end();
  } else {
    next();
  }
});

但是用第三方API的时候：

//vue中
  mounted () {
    axios
      .get('https://api.bilibili.com/x/web-interface/view?aid=xxxxxx')
      .then(response => (this.info = response))
  }

浏览器报错：

Access to XMLHttpRequest at 'https://api.bilibili.com/x/web-interface/view?aid=xxxxxx' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

我是想在前端通过b站的API来获取up主/标题/封面信息，不保存在数据库来着，想问问大佬们这个怎么解决呀。

Answer 1

既然都使用了 express ，那就索性使用代理

express:

const { createProxyMiddleware } = require('http-proxy-middleware');

app.use(
  '/bilibili',
  createProxyMiddleware({ target: 'https://api.bilibili.com', changeOrigin: true })
);

html/vue

  <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>

  <script>
    axios
      .get('/bilibili/x/web-interface/view?aid=xxxxxx')
      .then(response => {
        console.log(response)
      }).catch(err => {
        console.log(err)
      })
  </script>

Answer 2

跨域了啊，客户端访问不了的。可以用 Node.js 在服务端访问。

Answer 3

经过你的后端服务（express）进行代理

Answer 4

你这个是直接用浏览器，请求的 bilibili的接口，B站当然会有限制， 你可以用后端做一层转发请求。