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

Posted

技术标签:

【中文标题】如何使用 https://newsapi.org/ 克服 CORS 问题 [重复]【英文标题】:How to overcome CORS issue with https://newsapi.org/ [duplicate] 【发布时间】: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);
);

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

谢谢。

【问题讨论】:

我想说的是其他两个答案已经做了什么:看来这是一个服务器端配置问题(因此应该从服务器端解决) 【参考方案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 请求,但我想您只需将 endpointhttps://news... 更改为 /api/... @Eunicorn 我编辑了我的答案以将更改添加到endpoint【参考方案2】:

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

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

引用from MDN:

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

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

【讨论】:

以上是关于如何使用 https://newsapi.org/ 克服 CORS 问题 [重复]的主要内容,如果未能解决你的问题,请参考以下文章

使用 JSON 从 URL 添加图像

铸造模型不适用于 getX 颤振

搜索两个字符串集合 Swift

解析json xcode swift 4

清洁架构:为不同的数据源使用不同的模型类?

无法从 api 获得响应