我正在尝试通过React应用程序中的Redux动作和reducer进行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（故意缺少方案，主机和端口，因此它使用为页面提供服务的那个）。从客户端的角度来看，这不再是对其他主机的请求。
我猜想在您分派的操作中，这对应于更改endpoint属性：
endpoint: `/api/top-headlines?country=us&category=business&apiKey=${API_KEY}`
然后在您的Web服务器中设置基于路径的代理，以匹配以开头的路由/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”标头是由服务器而不是客户端设置的，因此在您的示例中没有做任何有用的事情。
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句