如何使用 https://newsapi.org/克服 CORS 问题 [英] How to overcome CORS issue with https://newsapi.org/

问题描述

我正在尝试通过 Redux 操作进行 api 调用 &我的 React 应用程序中的减速器.

I am trying to make api call through Redux actions & reducers in my React Application.

但是，我在浏览器上遇到了这个 CORS 问题.

However, I am getting this CORS issue on my browser.

我想知道是否可以从客户端解决此问题，因为我在内部无法访问 API.

I was wondering if i can resolve this issue from a client side as i donot have any access to the API internally.

谁能帮我解决这个问题?

Could anyone please help me solve this issue?

这是 newsActions.js 的代码:

Here is the code for 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 的代码:

Here is the code for 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);
});

如果您需要更多信息或有任何疑问，请在下方评论.

If you need additional info or have questions, please comment them below.

谢谢.

推荐答案

您可以通过从源(Web 服务器)代理到 API 服务器来解决跨源问题.

You can solve the Cross Origin issue by proxying from your origin (the web server) to the API server.

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

Change the calls in the client code to send requests to /api/whatever (deliberate lack of scheme, host and port there, so it uses the one that served the page). From the client's perspective this is no longer a request to a different host.

我猜在您调度的操作中，这将对应于更改 endpoint 属性:

I guess that in the action you dispatch, this would correspond to changing the endpoint property:

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

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

Then set up a path-based proxy in your web server to match routes starting with /api and proxy them to https://newsapi.org/v2. For example, using http-proxy-middleware:

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

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

请注意，Access-Control-Allow-Origin"标头是由服务器设置的，而不是客户端，因此它在您的示例中没有任何用处.

Note that the "Access-Control-Allow-Origin" header is set by the server, not the client, so it's not doing anything useful in your example.

这篇关于如何使用 https://newsapi.org/克服 CORS 问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！