如何使用https://newsapi.org/克服CORS问题

Question

我正在尝试通过React应用程序中的Redux动作和reducers进行api调用。

但是，我的浏览器出现了这个CORS问题。

我想知道我是否可以从客户端解决此问题，因为我内部没有对API的任何访问权限。

谁能帮我解决这个问题？

这是newsActions.js的代码：

import * as types from './actionTypes';



const API_KEY = "<Redacted>";



export const getNewsApi = () => {

  debugger;

  return (dispatch, getState) => {

    dispatch({

      type: 'API_REQUEST',

      options: {

        method: 'GET',

        service: 'news',

        mode: 'cors',

        headers:{

            'Access-Control-Allow-Origin':'*'

        },

        endpoint: `https://newsapi.org/v2/top-headlines?country=us&category=business&apiKey=${API_KEY}`,

        actionTypes: {

          success: types.GET_NEWS_API_SUCCESS,

          error: types.GET_NEWS_API_ERROR

        }

      }

    });

  }

}

这是server.js的代码：

var express = require('express');

var app = express();



var cors = require('cors');



let __homeglobals = [];



app.use(cors());

app.set("jsonp callback", true);





var server = app.listen(8082, function () {

   var host = server.address().address;

   var port = server.address().port;



   console.log("Example app listening at http://%s:%s", host, port);

});

如果您需要其他信息或有疑问，请在下面对其进行评论。

谢谢。

Answer 1

您可以通过将源服务器（Web服务器）代理到API服务器来解决跨源问题。

更改客户端代码中的调用以将请求发送到/api/whatever（故意缺少方案，主机和端口，因此它使用为页面提供服务的那个）。从客户端的角度来看，这不再是对其他主机的请求。

我猜想在您分派的操作中，这对应于更改endpoint属性：

endpoint: `/api/top-headlines?country=us&category=business&apiKey=${API_KEY}`

然后在您的Web服务器中设置基于路径的代理，以匹配以开头的路由/api并将其代理到https://newsapi.org/v2。例如，使用http- proxy-middleware：

var proxy = require('http-proxy-middleware');

app.use('/api', proxy({target: 'https://newsapi.org/v2'}));

请注意，“ Access-Control-Allow-Origin”标头是由服务器而不是客户端设置的，因此在您的示例中没有做任何有用的事情。