javascript - react js客户端的CORS策略问题

问题描述

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

我的代码是

 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)
                    });
            }}>

错误信息

标签： javascriptreactjsformikwebapi

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

“从源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
      }
)

javascript - react js客户端的CORS策略问题

问题描述

解决方案

推荐阅读