react js客户端的CORS策略问题

Posted 2023-03-31

【中文标题】react js客户端的CORS策略问题

【英文标题】：CORS policy problem in react js client side

【发布时间】：2020-06-07 15:31:01

【问题描述】：

我创建了一个 Formik 登录表单并调用 react js fetch 方法。在 web api 端添加 cors 并在 Postman 和 jquery 中成功运行。如何通过反应js调用“token_type”：“bearer”？在 web api 中也启用了 cors，并且也成功生成了 Token。如何通过 react js 调用这个 url https://localhost:44323/token？

我的代码是

 onSubmit=(values) => 
                fetch('https://localhost:44323/token', 
                    method: 'POST',
                    header:  'Content-type': 'application/json,multipart/form-data' ,                    
                    data: JSON.stringify(values)
                )
                    .then(r => r.json())
                    .then(res => 
                        console.log(res)
                    );
            >

Error messages

【参考方案1】：

问题的根本原因可以在以下显示的错误消息中找到：

“从源 http://localhost:3000 获取 https://localhost:44323/token 的访问已被 CORS 策略阻止。请求的资源上不存在 Access-Control-Allow-Origin 标头 ....”

---

如何解决问题？

可以通过以下方式解决问题：

1.允许服务器上的来源（http://localhost:3000）（推荐）

这可以通过在服务器端的 HTTP 响应中添加以下标头来完成：

Access-Control-Allow-Origin: http://localhost:3000

2。在“no-cors”模式下发送 Fetch 请求

这可以通过如下更新获取请求来完成：

fetch( 'https://localhost:44323/token', 
        
           method: 'POST',
           mode: 'no-cors',
           headers:  'Content-Type': 'application/json' ,
           body: JSON.stringify(data)
       
)
.then(response => 
        // Code for processing the response
      
)
.catch((error) => 
        // Code for handling the error
      
)

更多信息： https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch