代码之家 › 专栏 › 技术社区 › Eunicorn

如何克服CORS问题https://newsapi.org/[副本]

react-redux cors redux reactjs javascript

Eunicorn · 技术社区 · 8 年前

我正在尝试通过Redux操作进行api调用&React应用程序中的减速机。

然而,我在浏览器上收到了这个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
        }
      }
    });
  }
}

这是服务器的代码。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 回复 | 直到 6 年前

Tom Fenech 8 年前

您可以通过从源站(web服务器)代理到API服务器来解决跨源问题。

更改客户端代码中的调用以将请求发送到 /api/whatever (故意缺少scheme、host和port,因此它使用了为页面提供服务的scheme、host和port)。从客户端的角度来看,这不再是对其他主机的请求。

我猜在您发送的操作中,这将对应于更改 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”标头是由服务器而不是客户端设置的,因此在您的示例中它没有做任何有用的事情。

FeifanZ 8 年前

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

不幸的是,你不能; 请求背后的服务器必须设置正确的CORS标头 使CORS工作(您无法从客户端请求进行设置)。这是由浏览器本身强制执行的,而不是您可以从客户端代码中解析的内容。

引用 from MDN :

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

在这种情况下,API似乎是要从服务器使用,而不是直接从浏览器使用。

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

1 年前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

1 年前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

1 年前

noblerare · Vite错误-未定义导出(SSR)

1 年前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

1 年前