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

Posted 2023-03-04

【中文标题】向 REST API 发送 POST 请求时没有“Access-Control-Allow-Origin”策略错误

【英文标题】：No 'Access-Control-Allow-Origin' policy error on sending POST request to REST API

【发布时间】：2021-03-17 23:32:47

【问题描述】：

我正在制作一个简单的全栈项目，其中我有一个使用 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 上运行

【参考方案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);
    

【参考方案2】：

您的请求来源是：

http://localhost:3000

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

http://127.0.0.1:3000

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

将您的网址更改为：

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

【讨论】：

我尝试了这个解决方案，它似乎已经修复了与 CORS 相关的错误，但由于以下错误，请求仍未成功执行 Error: Request failed with status code 400 at e.exports ( spread.js:25) 在 e.exports (spread.js:25) 在 XMLHttpRequest.l.onreadystatechange (spread.js:25)

***.com/questions/44731340/…