如何利用https://newsapi.org/解决CORS问题
我试图通过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);
});
如果您需要更多的信息或问题，请在下面评论。
谢谢。
回答 2
Stack Overflow用户
发布于 2018-05-10 18:19:54
您可以通过代理从原点( 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'}));请注意，“访问-控制-允许-原产地”标头是由服务器而不是客户端设置的，因此在您的示例中没有做任何有用的事情。
Stack Overflow用户
发布于 2018-05-10 18:08:20
我想知道我能否从客户端解决这个问题，因为我无法在内部访问API。
不幸的是，您不能这样做；请求后面的服务器必须设置正确的CORS头才能工作(您不能从客户端请求设置它)。这是由浏览器本身强制执行的，而不是可以从客户端代码中解析的东西。
引用来自MDN
出于安全考虑，浏览器限制从脚本内部启动的跨源HTTP请求.例如，XMLHttpRequest和Fetch API遵循相同的原点策略。这意味着使用这些API的web应用程序只能从应用程序加载的相同域请求HTTP资源，除非使用CORS标头。
在这种情况下，API看起来是用于服务器，而不是直接从浏览器中使用。
https://stackoverflow.com/questions/50278979
复制相似问题
腾讯云开发者
