如何使用 https://newsapi.org/ 克服 CORS 问题 [重复]答案

【问题标题】：How to overcome CORS issue with https://newsapi.org/ [duplicate]如何使用 https://newsapi.org/ 克服 CORS 问题 [重复]
【发布时间】：2018-10-21 02:00:01
【问题描述】：

我正在尝试通过我的 React 应用程序中的 Redux 操作和减速器进行 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);
});

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

谢谢。

【问题讨论】：

我想说的是其他两个答案已经做了什么：看来这是一个服务器端配置问题（因此应该从服务器端解决）

标签： javascript reactjs redux cors react-redux

【解决方案1】：

您可以通过从您的源（网络服务器）代理到 API 服务器来解决跨源问题。

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

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

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

然后在您的网络服务器中设置一个基于路径的代理来匹配以/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”标头是由服务器而不是客户端设置的，因此在您的示例中它没有做任何有用的事情。

【讨论】：

感谢您的回答！如何“更改客户端代码中的调用以将请求发送到/api/whatever”？我应该添加哪个文件？
我不知道您调度的操作如何转换为 AJAX 请求，但我想您只需将 endpoint 从 https://news... 更改为 /api/...。
@Eunicorn 我编辑了我的答案以将更改添加到endpoint

【解决方案2】：

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

很遗憾，你不能； 请求背后的服务器必须设置正确的 CORS 标头才能使 CORS 工作（您不能从客户端请求中设置它）。这是由浏览器本身强制执行的，而不是您可以通过客户端代码解决的问题。

引用from MDN:

出于安全原因，浏览器会限制从脚本中发起的跨域 HTTP 请求。例如，XMLHttpRequest 和 Fetch API 遵循同源策略。这意味着使用这些 API 的 Web 应用程序只能从加载该应用程序的同一域请求 HTTP 资源，除非使用了 CORS 标头。

在这种情况下，该 API 似乎旨在从服务器使用，而不是直接从浏览器使用。

【讨论】：