向 REST API 发送 POST 请求时没有“Access-Control-Allow-Origin”策略错误

Question

我正在制作一个简单的全栈项目，其中我有一个使用 NodeJS 和 Express 构建的非常基本的 REST API。它是一个服务器端呈现的网站。

在尝试登录时，当我向登录端点发送 POST 请求时，我在控制台中收到以下错误

在“http://127.0.0.1:3000/api/v1/users/login”访问 XMLHttpRequest 来自原点“http://localhost:3000”已被 CORS 策略阻止： 对预检请求的响应未通过访问控制检查：否 请求中存在“Access-Control-Allow-Origin”标头 资源。

这是发送POST请求的代码sn-p

const login = async (email,password) => {
    try {
        const res = await axios({
            method: 'POST',
            url: 'http://127.0.0.1:3000/api/v1/users/login',
            data: {
                email,
                password
            }
        });    
        if(res.data.status === 'success') {
            alert('Logged in successfully');
            window.setTimeout(() => {
                location.assign('/');
            }, 1500);
        }
    }
    catch(err) {
        console.log(err);
    }
}

请解释我收到该错误的原因以及如何修复它。该 API 尚未部署，它正在 localhost 上运行

Answer 1

您能否在请求中添加 Access-Control-Allow-Origin 标头并查看，

const login = async (email,password) => {
    try {
        const res = await axios({
            method: 'POST',
            url: 'http://127.0.0.1:3000/api/v1/users/login',
            headers: {
                   'Access-Control-Allow-Origin': '*',
                   'Content-Type': 'application/json',
                    },
            data: {
                email,
                password
            }
        });    
        if(res.data.status === 'success') {
            alert('Logged in successfully');
            window.setTimeout(() => {
                location.assign('/');
            }, 1500);
        }
    }
    catch(err) {
        console.log(err);
    }
}

Answer 2

您的请求来源是：

http://localhost:3000

这与您将请求发送到的域不同：

http://127.0.0.1:3000

为避免此 CORS 错误，FQDN 必须相同，包括主机名和端口。 （或者您可以为 CORS 配置您的服务器。）就服务器而言，不同的主机意味着一个完全独立的实体，即使它是同一台机器。

将您的网址更改为：

url: 'http://localhost:3000/api/v1/users/login',