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

问题描述

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

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.

我想知道是否可以解决这个问题

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.

我想在您分派的操作中，这相当于更改端点属性：

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}`

然后在您的网络中设置基于路径的代理服务器以匹配以 / 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屋！