Javascript ';访问控制允许原点';从React(同构应用程序)进行API调用时出现问题
我在使用React和Express的同构JavaScript应用程序中遇到了一个问题 当我的组件挂载时,我正在尝试使用axios.get发出HTTP请求Javascript ';访问控制允许原点';从React(同构应用程序)进行API调用时出现问题,javascript,node.js,reactjs,axios,cors,Javascript,Node.js,Reactjs,Axios,Cors,我在使用React和Express的同构JavaScript应用程序中遇到了一个问题 当我的组件挂载时,我正在尝试使用axios.get发出HTTP请求 componentDidMount() { const url = 'http://ufc-data-api.ufc.com/api/v3/iphone/fighters/title_holders'; axios.get(url).then( res => { //use res to update current st
componentDidMount() {
const url = 'http://ufc-data-api.ufc.com/api/v3/iphone/fighters/title_holders';
axios.get(url).then( res => {
//use res to update current state
})
}
我从API中获得状态200 res,但我没有获得任何响应数据,也没有在控制台中获得错误
XMLHttpRequest cannot load http://ufc-data-api.ufc.com/api/v3/iphone/fighters/title_holders.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://localhost:3000' is therefore not allowed access.
但是,如果我在server.js中发出请求
const url = 'http://ufc-data-api.ufc.com/api/v3/iphone/fighters/title_holders';
axios.get(url).then(res => {
//console.log(res);
});
它工作正常,我在服务器启动时得到响应数据。这是实际API的问题还是我做错了什么?如果这是CORS问题,我猜server.js中的请求也不会起作用?谢谢 因为服务器没有CORS头,所以不允许您获取响应 这是我从Chrome brower捕获的API的标题:
Age:28
Cache-Control:max-age=3600, public
Connection:keep-alive
Date:Fri, 06 Jan 2017 02:05:33 GMT
ETag:"18303ae5d3714f8f1fbcb2c8e6499190"
Server:Cowboy
Status:200 OK
Via:1.1 vegur, 1.1 e01a35c1b8f382e5c0a399f1741255fd.cloudfront.net (CloudFront)
X-Amz-Cf-Id:GH6w6y_P5ht7AqAD3SnlK39EJ0PpnignqSI3o5Fsbi9PKHEFNMA0yw==
X-Cache:Hit from cloudfront
X-Content-Type-Options:nosniff
X-Frame-Options:SAMEORIGIN
X-Request-Id:b971e55f-b43d-43ce-8d4f-aa9d39830629
X-Runtime:0.014042
X-Ua-Compatible:chrome=1
X-Xss-Protection:1; mode=block
响应标题中没有CORS标题。CORS是一种浏览器功能。服务器需要选择CORS以允许浏览器绕过同源策略。您的服务器将没有相同的限制,并且能够向任何具有公共API的服务器发出请求
在启用CORS的服务器上创建一个端点,该端点可以作为web应用程序的代理。我认为您的问题的答案是 要使Chrome发送访问控制允许源代码位于标头中,只需将/etc/hosts文件中的本地主机别名为其他域,如: 127.0.0.1 localhost yourdomain.com
使用google Chrome扩展名为。它会在应用程序中动态修改CORS头。我不知道这是否有帮助,但在远程调试react本机应用程序时,我遇到了相同的错误。我在192.168.x.x:8081上运行调试器。我读了一点这方面的内容来教育自己什么是CORS。(我是初学者)并将我的URL从IP:8081更改为localhost:8081,我的问题得到了解决。我也遇到了同样的问题。其他答案是正确的,但还有另一个解决方案。 您可以将响应标头设置为允许跨源访问。 根据,在任何app.get调用之前,您必须添加以下代码:
app.use(function(req, res, next) {
res.header("Access-Control-Allow-Origin", "*");
res.header("Access-Control-Allow-Headers", "X-Requested-With");
next();
});
这对我来说很有效:)我今天遇到了同样的错误,使用React with Typescript和使用Java Spring boot的后端,如果您有一只手在后端,您可以简单地为CORS添加一个配置文件 对于下面的示例,我将allowed origin设置为*以允许所有,但您可以更具体,只设置url
我在使用
fetch
命令时遇到了同样的问题。快速查看来自的文档可以告诉我们:
如果您从中请求的服务器不支持CORS,您应该在控制台中得到一个错误,表明由于缺少CORS访问控制允许源标头,跨源请求被阻止
您可以使用no cors模式请求不透明资源
fetch('https://bar.com/data.json', {
模式:默认情况下:“无cors”/“cors”
})
.然后(功能(响应){
//做些有反应的事情
});
不使用外部代理或Chrome扩展进行修复
应该在服务器端启用CORS!如果您无法在服务器上激活它(例如使用外部API),请创建一个中间件React->middleware->original server
app.js
中使用下面的代码
const express = require("express");
var cors = require('cors')
const app = express();
app.use(cors());
const { createProxyMiddleware } = require('http-proxy-middleware');
app.use('/api', createProxyMiddleware({
target: 'http://localhost:8080/', //original url
changeOrigin: true,
//secure: false,
onProxyRes: function (proxyRes, req, res) {
proxyRes.headers['Access-Control-Allow-Origin'] = '*';
}
}));
app.listen(5000);
http://localhost:5000/api/xxx
到原始服务器(例如http://localhost:8080/api/xxx
),并将结果返回给客户端
axios.get('http://localhost:5000/api/xxx', //proxy uri
{
headers: {
authorization: ' xxxxxxxxxx' ,
'Content-Type': 'application/json'
}
}).then(function (response) {
console.log(response);
});
node app.js
和react projectnpm start
在调试模式下使用vs代码时,可以使用此代码 “runtimeArgs”:[“--disable web security”,“--user data dir=~/ChromeUserData/”] launch.json
{
"version": "0.2.0",
"configurations": [
{
"type": "chrome",
"request": "launch",
"name": "Chrome disable-web-security",
"url": "http://localhost:3000",
"webRoot": "${workspaceFolder}",
"runtimeArgs": [
"--disable-web-security",
"--user-data-dir=~/ChromeUserData/"
]
}
]
}
或者直接运行
Chrome--禁用web安全性--user data dir=~/ChromeUserData/
Create React应用程序有一个简单的方法来处理这个问题:向package.json文件添加一个代理字段,如下所示
"proxy": "http://localhost:8081",
在我的例子中,即使在服务器端启用了CORS,我也会收到CORS错误。问题是url
localhost:4001/todos
我忘了在“http”前面加上前缀
http://localhost:4001/todos //correct way
你不必在客户端处理它。只需要以下步骤:
步骤1:
npm install cors
步骤2:
//express-server.js
...
const cors = require('cors');
app.use(cors());
完成了 @Todd安全性应始终放在方便之前。幸运的是,配置代理服务器只需5分钟。此外,还有一些代理服务已经公开了这种类型的功能,但只允许如此多的免费请求。设置您自己的代理非常值得。我也有同样的问题,我已经阅读了您上面提到的文档,但仍然不了解CORS。您能详细说明一下吗,please@SagarGautam你能提出一个新的问题,提一下你在理解上遇到的问题吗,然后在这里评论你的文章的链接?我很乐意回答我在这里提出的问题,请看一看我也有同样的问题。在我的情况下,我可以从桌面计算机web浏览器创建记录,但不能通过我的iPhone web浏览器创建。仅用于测试目的。您的用户不会启用浏览器上的插件来使用您的网站Firefox也可以使用插件。但是请记住,对于no cors请求的响应类型为“不透明”,这意味着您将无法读取从服务器返回的数据。如果有人在本地测试时出错,则只有当客户端尝试访问本地主机进行本地开发时,您的答案中有许多答案才有效。OP询问有关访问real server的问题。对不起,您是对的,我在错误消息中错过了对localhost的引用。您知道如何在我运行“npm start”时使vsc自动使用此配置吗?我
npm install cors
//express-server.js
...
const cors = require('cors');
app.use(cors());