如何使用 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 请求,但我想您只需将 endpoint
从 https://news...
更改为 /api/...
。
@Eunicorn 我编辑了我的答案以将更改添加到endpoint
【参考方案2】:
我想知道是否可以从客户端解决此问题,因为我在内部没有对 API 的任何访问权限。
很遗憾,你不能; 请求背后的服务器必须设置正确的 CORS 标头才能使 CORS 工作(您不能从客户端请求中设置它)。这是由浏览器本身强制执行的,而不是您可以通过客户端代码解决的问题。
引用from MDN:
出于安全原因,浏览器会限制从脚本中发起的跨域 HTTP 请求。例如,XMLHttpRequest 和 Fetch API 遵循同源策略。这意味着使用这些 API 的 Web 应用程序只能从加载该应用程序的同一域请求 HTTP 资源,除非使用了 CORS 标头。
在这种情况下,该 API 似乎旨在从服务器使用,而不是直接从浏览器使用。
【讨论】:
以上是关于如何使用 https://newsapi.org/ 克服 CORS 问题 [重复]的主要内容,如果未能解决你的问题,请参考以下文章