react js客户端的CORS策略问题答案

【问题标题】：CORS policy problem in react js client sidereact js客户端的CORS策略问题
【发布时间】：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

【问题讨论】：

标签： javascript reactjs formik webapi

【解决方案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
      }
)

【讨论】：