React.js localhost 和 Node Express 服务器中的 Cors 问题

Question

我一直在尝试将托管在 Digital Ocean droplet 上的 API 称为 Node.js Express 服务器。我运行遇到的问题是 CORS。这是我的客户端调用和错误。

export const postRequest = async (route, data, headers) => {
    let config = {
        headers: headers
    }
    let dataString = JSON.stringify(data)
    return instance.post(route, dataString, config)
    .then((response) => {
        return response.data
    })
    .catch((err) => {
        console.log(err);
        return {error: err}
    });
}

export const login = (email, password) => {
    const data = {
        email:email,
        password:password
    };
    
    const headers = {
        'Content-Type': 'application/json'
    }

    return postRequest('/login', data, headers);
}

服务器端只是一个简单的快速服务器，没有在代码中实现核心。我尝试使用 app.use(cors()) 但没有成功，所以我现在重新开始。前端是react js和axios。

我遇到的错误是

Access to XMLHttpRequest at 'https://example.com/login' 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

没关系！！！我在客户端犯了一个错误。要修复此错误，请转到您的服务器代码，

npm install --save cors

添加

const cors = require('cors');

app.use(cors());

重启你的服务器，你就可以开始了。

Answer 2

在您的服务器配置中添加这个

var corsOptions = {
    origin: 'http://localhost:3000'
};

app.use(cors(corsOptions));

React.js localhost 和 Node Express 服务器中的 Cors 问题

Issue with Cors in React.js localhost and Node Express server

node.js

cors

express

reactjs

digital-ocean