Question

伙计们，我正在制作一个MERN堆栈项目，所以我面临的问题是，在React Server的动作创建器中，我必须向Node JS服务器发出获取请求，或者简而言之

我必须从http://localhost:3000/来请求我在http://localhost:5000/api/currentuser中拥有的数据

nodejs服务器中存储的数据为{"_id":"5d73fd9003b5302f6b013a46","googleid":"109463598810933991924","__v":0} 是从mongodb获取的

所以我做的是在动作创建器文件中

我喜欢

import axios from "axios";
export const fetchuser = () => {
    return async(dispatch)=>{
       const res=await axios.get("http://localhost:5000/api/currentuser")
            dispatch({
                type:'fetchuser',
                payload:res.data

        })

    }

};

但是然后在我的控制台中，我遇到了错误，并说

Access to XMLHttpRequest at 'http://localhost:5000/api/currentuser' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Answer 1

没有Express代码，很难让人确信，但是您可能需要配置Express服务器以设置CORS。

您可以在此处查看Express + CORS的文档：https://expressjs.com/en/resources/middleware/cors.html

var express = require("express");
var cors = require("cors");
var app = express();

app.use(
  cors({
    origin: "http://localhost:3000"
  })
);

有关一般CORS的更多详细信息，read this。

Answer 2

这是跨源问题。您尚未在nodejs中提供对http://localhost:3000/的访问权限。

有两种简单的方法，

1。没有任何npm软件包的简单方法：

app.use(function (req, res, next) {

    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');

    // methods you wish to allow
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

    / headers you wish to allow
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
    next();
});

2。使用cors npm软件包：

正式文件网址 https://expressjs.com/en/resources/middleware/cors.html

-允许所有域/网址

import cors from 'cors';
app.use(cors());

您会注意到新的标头将返回为访问控制允许来源：*

-要允许特定的域/网址，

import cors from 'cors';

app.use(cors({
  origin: 'http://localhost:3000/'
}));

标题为

访问控制允许来源：http://localhost:3000

从React服务器向节点Server发出请求时出错

2 个答案: