Question

我正在尝试通过Redux动作和api进行api调用我的React应用程序中的reducer。

但是，我在浏览器上遇到了这个CORS问题。

我想知道我是否可以从客户端解决此问题，因为我无法在内部访问API。

有人可以帮我解决这个问题吗？

以下是newsActions.js的代码：

＆＃13;

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
        }
      }
    });
  }
}

＆＃13;

以下是server.js的代码：

＆＃13;

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);
});

＆＃13;

如果您需要其他信息或有任何疑问，请在下方发表评论。

谢谢。

Answer 1

您可以通过从源（Web服务器）代理到API服务器来解决Cross Origin问题。

更改客户端代码中的调用以将请求发送到/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”标头由服务器设置，而不是客户端，所以它在您的示例中没有做任何有用的事情。

Answer 2

我想知道我是否可以从客户端解决此问题，因为我无法在内部访问API。

不幸的是你做不到; 请求后面的服务器必须为CORS设置正确的CORS标头才能工作（您无法从客户端请求设置它）。这是由浏览器本身强制执行的，而不是您可以从客户端代码解决的问题。

引用from MDN：

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

在这种情况下，看起来API旨在从服务器使用，而不是直接从浏览器使用。

如何克服ReactJS中的CORS问题

2 个答案: