我正在尝试通过React应用程序中的Redux动作和reducers进行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); });
如果您需要其他信息或有疑问,请在下面对其进行评论。
谢谢。
您可以通过将源服务器(Web服务器)代理到API服务器来解决跨源问题。
更改客户端代码中的调用以将请求发送到/api/whatever(故意缺少方案,主机和端口,因此它使用为页面提供服务的那个)。从客户端的角度来看,这不再是对其他主机的请求。
/api/whatever
我猜想在您分派的操作中,这对应于更改endpoint属性:
endpoint
endpoint: `/api/top-headlines?country=us&category=business&apiKey=${API_KEY}`
然后在您的Web服务器中设置基于路径的代理,以匹配以开头的路由/api并将其代理到https://newsapi.org/v2。例如,使用http- proxy-middleware:
/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”标头是由服务器而不是客户端设置的,因此在您的示例中没有做任何有用的事情。