Warning: file_get_contents(/data/phpspider/zhask/data//catemap/2/node.js/39.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/22.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Node.js CORS向nodejs发出问题并作出反应_Node.js_Reactjs_Express - Fatal编程技术网

Node.js CORS向nodejs发出问题并作出反应

Node.js CORS向nodejs发出问题并作出反应,node.js,reactjs,express,Node.js,Reactjs,Express,大家好。我正在尝试建立一个登录,现在我正在努力使用注册表单,我使用react js作为前端,使用nodejs/express作为后端 我创建了注册表表单,我将此注册表表单中的数据放入一个对象中,将其解析为JSON obj,并通过fetch api将其发送到节点服务器,但是cors不会让这种情况发生,我不知道为什么。下一个是来自寄存器的代码(正面) import React,{useState}来自“React”; 导入“./Register.css”; 从“./Title/Title”导入标题

大家好。我正在尝试建立一个登录,现在我正在努力使用注册表单,我使用react js作为前端,使用nodejs/express作为后端

我创建了注册表表单,我将此注册表表单中的数据放入一个对象中,将其解析为JSON obj,并通过fetch api将其发送到节点服务器,但是cors不会让这种情况发生,我不知道为什么。下一个是来自寄存器的代码(正面)

import React,{useState}来自“React”;
导入“./Register.css”;
从“./Title/Title”导入标题;
从“./Label/Label”导入标签;
从“./Input/Input”导入输入;
函数寄存器(){
const[name,setName]=useState(“”);
const[lastname,setLastname]=useState(“”);
const[email,setEmail]=useState(“”);
const[username,setUsername]=useState(“”);
const[password,setPassword]=useState(“”);
函数handleChange(名称、值){
如果(名称==='name')设置名称(值);
else if(name==='lastname')setLastname(value);
else if(name=='email')setEmail(value);
如果(name=='username')设置用户名(value),则为else;
如果(名称==='password')设置密码(值);
}
函数handleSubmit(e){
e、 预防默认值();
让帐户={name,lastname,email,username,password};
if(account)console.log(account);
var url='1〕http://localhost:3030/';
获取(url{
方法:'选项',
正文:JSON.stringify(account),
标题:{
“内容类型”:“应用程序/json”
}
}).then(res=>res.json())
.catch(error=>console.error('error:',error))
.then(response=>console.log('Success:',response));
///////////////////////////////////////////////////////////////////////////////////
}
返回(
登记
)
};

导出默认寄存器您可以使用

简单地做:

const cors = require('cors')
const app = express()
app.use(cors())

当面临CORS问题时,请记住这些概念

  • 这不是前端应用程序故障(大部分)
  • 您正在尝试跨域请求
  • 默认情况下,这些都会被阻止
  • 您可以通过使用后端
    allowOrigins
    来允许这一点(语法因语言而异)
  • 这里的问题是从localhost:3000访问localhost:3030
  • const express=require('express');
    const cors=需要(“cors”);
    常量app=express();
    app.use(cors())
    //对于单一来源
    var公司={
    来源:'http://localhost:8080',
    选项SuccessStatus:200//用于传统浏览器支持
    }
    
    应用程序使用(cors(corsOptions))如果您将
    访问控制允许凭据设置为
    true
    则表示您允许有凭据的请求

    res.setHeader('Access-Control-Allow-Credentials', true) 
    
    然后您不能将
    访问控制允许原点设置为
    *(通配符)

    所以这里的解决方案是, 您必须在此处设置特定的原点(默认情况下,reactjs的前端应用原点)http://localhost:3000/)


    最后,我找到了解决方案,首先,我使用了“POST”而不是“OPTION”方法,在服务器端,我更改了http://localhost:3030/“只需”/“即可工作。

    检查此项。关于CORS问题和运行express的node.js服务器,有很多很多堆栈溢出问题。你研究过其中哪些问题,你尝试过哪些答案,为什么他们没有解决你的特定问题?我在发帖前做过研究,碰巧我发现的解决方案对我没有帮助,与我的案例无关,对我来说太复杂了,尝试过但不起作用。。或者别的什么。我认为在这里引用它们并不重要,也许我错了
    res.setHeader("Access-Control-Allow-Origin", "*");
    
    res.setHeader("Access-Control-Allow-Origin", "http://localhost:3000/");